ep_markdown_toc 1.0.8 → 1.0.10

package/README.md

@@ -7,7 +7,8 @@ It does this in multiple ways:
 - It enables automatic generation of a Table of Contents based on Markdown-style hashsign headings (#, ##, etc.) in Etherpad documents (can be disabled through settings). === style headings are not supported at the moment, and likely will never be.
 - It styles the headings to make it easier to scan long documents for chapters (can be disabled through settings)
 - It adds a button to the toolbar that shows a quick cheatsheet for Markdown syntax
-- It removes the default text styling buttons from the toolbar (can be reenabled through settings)
+- It removes the default text styling buttons from the toolbar and disables the associated shortcuts.
+- Tries to remove rich text when pasting
 
 It was developed as a compagnion to [Octomode](https://cc.vvvvvvaria.org/wiki/Octomode), a collective editing space for PDF making, using Etherpad, Paged.js and Flask. 
 It borrows heavily from the excellent [ep_headings2](https://github.com/ether/ep_headings2) plugin.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep_markdown_toc",
   "description": "Provides markdown-based heading detection and TOC for Etherpad, used in Octomode.",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "author": {
     "name": "hrk",
     "email": "heerko@hackersanddesigners.nl"

package/static/css/popup.css

@@ -27,4 +27,36 @@
 
 #markdown-cheat .popup-content pre {
     white-space: break-spaces;
-}
+}
+
+.cheat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 10px;
+}
+
+.cheat-block {
+  background: #f7f7f7;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 10px;
+  font-family: monospace;
+  font-size: 12px;
+}
+
+.cheat-block h3 {
+  margin: 0 0 6px 0;
+  font-size: 13px;
+}
+
+.cheat-lines {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.cheat-lines li {
+  margin: 0 0 4px 0;
+  white-space: pre-line;
+}

package/static/css/toc.css

@@ -53,15 +53,15 @@ Add a margin for the TOC when enabled
 For hiding the regular Ace/Etherpad editor buttons.
 TODO: We might be able to this through manipulating the settings instead 
 */
-.hide-buttons #editbar .menu_left [data-key="bold"],
-.hide-buttons #editbar .menu_left [data-key="italic"],
-.hide-buttons #editbar .menu_left [data-key="underline"],
-.hide-buttons #editbar .menu_left [data-key="strikethrough"],
-.hide-buttons #editbar .menu_left [data-key="bold"],
-.hide-buttons #editbar .menu_left [data-key="insertorderedlist"],
-.hide-buttons #editbar .menu_left [data-key="insertunorderedlist"],
-.hide-buttons #editbar .menu_left [data-key="indent"],
-.hide-buttons #editbar .menu_left [data-key="outdent"],
-.hide-buttons #editbar .menu_left [data-key="bold"] + li { 
+#editbar .menu_left [data-key="bold"],
+#editbar .menu_left [data-key="italic"],
+#editbar .menu_left [data-key="underline"],
+#editbar .menu_left [data-key="strikethrough"],
+#editbar .menu_left [data-key="bold"],
+#editbar .menu_left [data-key="insertorderedlist"],
+#editbar .menu_left [data-key="insertunorderedlist"],
+#editbar .menu_left [data-key="indent"],
+#editbar .menu_left [data-key="outdent"],
+#editbar .menu_left [data-key="bold"] + li { 
   display: none !important;
 }

package/static/js/client_hooks.js

@@ -18,6 +18,7 @@ exports.postAceInit = (hook, context) => {
   _ace = context.ace;
   // Initialize plain paste handler (if enabled).
   maybeInitPlainPaste(context);
+  initShortcutBlocker(context);
   updateTOC();
 };
 
@@ -173,10 +174,6 @@ function initSettingsUI() {
     prefs.hideToc = false; // defaults to false
     padcookie.setPref('userPrefs', prefs);
   }
-  if (typeof prefs.hideButtons === 'undefined') {
-    prefs.hideButtons = true; // defaults to true 
-    padcookie.setPref('userPrefs', prefs);
-  }
   if (typeof prefs.styleHeadings === 'undefined') {
     prefs.styleHeadings = true; // also true
     padcookie.setPref('userPrefs', prefs);
@@ -217,7 +214,6 @@ function initSettingsUI() {
   }
 
   bindToggleSetting('#options-hideToc', 'hide-toc', 'hideToc');
-  bindToggleSetting('#options-hideButtons', 'hide-buttons', 'hideButtons');
   bindToggleSetting('#options-styleHeadings', 'style-md-headings', 'styleHeadings');
 
   // Plain paste toggle
@@ -259,3 +255,33 @@ function maybeInitPlainPaste(context) {
   //const plainPaste = require('./plain_paste');
   //plainPaste.ensure(context);
 }
+
+// Disable common rich-text keyboard shortcuts (Ctrl/Cmd+B/I/U, etc.)
+function initShortcutBlocker(context) {
+  const padOuter = document.querySelector('iframe[name="ace_outer"]');
+  const padInner = padOuter?.contentDocument?.querySelector('iframe[name="ace_inner"]');
+  const innerDoc = padInner?.contentDocument;
+  if (!innerDoc) return;
+
+  const handler = (e) => {
+    const key = (e.key || '').toLowerCase();
+    const meta = e.metaKey || e.ctrlKey;
+    if (!meta) return;
+    // Block common formatting combos:
+    // b (bold), i (italic), u (underline), 5 (strike);
+    // Shift+L (bullet), Shift+N (numbered list), Shift+1 (heading), Shift+C (color).
+    const block =
+      ['b', 'i', 'u', '5'].includes(key) ||
+      (e.shiftKey && ['l', 'n', '1', 'c'].includes(key));
+    if (block) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+  };
+
+  if (!innerDoc._tocShortcutBlockerBound) {
+    innerDoc.addEventListener('keydown', handler, true);
+    innerDoc._tocShortcutBlockerBound = true;
+  }
+}

package/templates/markdownPopup.ejs

@@ -5,51 +5,75 @@
         href="https://garrettgman.github.io/rmarkdown/authoring_pandoc_markdown.html" target="_blank">Pandoc Markdown
         Authoring Guide</a></p>
     </p>
-    <h3>Headings</h3>
-    <pre><code># Heading 1  
-## Heading 2  
-### Heading 3
-### Heading 3
-</code></pre>
-    <h3>Styling text</h3>
-    <pre><code>
-For a paragraph break, follow a line by two or more spaces.
 
-**bold**  
-*italic*  
-~~strikethrough~~
+    <div class="cheat-grid">
+      <div class="cheat-block">
+        <h3>Headings</h3>
+        <ul class="cheat-lines">
+          <li># Heading 1</li>
+          <li>## Heading 2</li>
+          <li>### Heading 3</li>
+        </ul>
+      </div>
 
-`inline code`  
+      <div class="cheat-block">
+        <h3>Styling</h3>
+        <ul class="cheat-lines">
+          <li>**bold**</li>
+          <li>*italic*</li>
+          <li>~~strikethrough~~</li>
+          <li>`inline code`</li>
+        </ul>
+      </div>
 
-```
-code block
-```
+      <div class="cheat-block">
+        <h3>Spacing</h3>
+        <ul class="cheat-lines">
+          <li>A line containing a row of three or more *, -, or _ characters (optionally separated by spaces) produces a horizontal rule: <br>
+*  *  *  *<br>
+---------------<br>
+It is strongly recommended that horizontal rules be separated from surrounding text by blank lines. </li>
+          <li>Line break: end a line with two trailing spaces␠␠</li>
+          <li>Line break: end a line with backslash \</li>
+        </ul>
+      </div>
 
-> blockquote
-</code></pre>
-    <h3>Lists</h3>
-    <pre><code>
-- Unordered list  
-1. Ordered list
-</code></pre>
-    <h3>Links & Images</h3>
-    <pre><code>
-[link text](https://example.com)  
-![alt](img.jpg)
-![alt](img.jpg){.class}
-</code></pre>
+      <div class="cheat-block">
+        <h3>Lists</h3>
+        <ul class="cheat-lines">
+          <li>- Unordered item</li>
+          <li>1. Ordered item</li>
+        </ul>
+      </div>
 
-    <pre><code>
-horizontal rule
---- 
+      <div class="cheat-block">
+        <h3>Links & Images</h3>
+        <ul class="cheat-lines">
+          <li>[link text](https://example.com)</li>
+          <li>![alt](img.jpg)</li>
+          <li>![alt](img.jpg){.class}</li>
+        </ul>
+      </div>
 
-::: intro  
-This is the intro block.  
-:::
+      <div class="cheat-block">
+        <h3>Footnotes</h3>
+        <ul class="cheat-lines">
+          <li>You can use inline footnotes: ^[All content here will be a footnote.]</li>
+          <li>Note: support for two-part Pandoc-style footnotes is sketchy.</li>
+        </ul>
+      </div>
 
-::: main  
-This is the main block.  
-:::
-</code></pre>
+      <div class="cheat-block">
+        <h3>Blocks (Pandoc)</h3>
+        <ul class="cheat-lines">
+          <li>::: intro</li>
+          <li>This is the intro block.</li>
+          <li>:::</li>
+          <li>::: main</li>
+          <li>This is the main block.</li>
+          <li>:::</li>
+        </ul>
+      </div>
+    </div>
   </div>
-</div>
+</div>

package/templates/tocSettings.ejs

@@ -4,12 +4,7 @@
         <input type="checkbox" id="options-hideToc" />
         <label for="options-hideToc" aria-label="Hide TOC">Hide TOC</label>
     </p>
-
-    <p>
-        <input type="checkbox" id="options-hideButtons" />
-        <label for="options-hideButtons" aria-label="Hide text styling buttons">Hide text styling buttons</label>
-    </p>
-
+    
     <p>
         <input type="checkbox" id="options-styleHeadings" />
         <label for="options-styleHeadings" aria-label="Enable/Disable styling of the markdown headings">Style Markdown headings</label>