ep_markdown_toc 1.0.6 → 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/index.js

@@ -12,7 +12,13 @@ exports.eejsBlock_styles = (hook, context) => {
 
 exports.eejsBlock_editbarMenuRight = (hookName, args, cb) => {
   // console.log("MENU RIGHT");
-  args.content = eejs.require('ep_markdown_toc/templates/markdownButton.ejs') + args.content;
+  args.content = eejs.require('ep_markdown_toc/templates/tocToggleButton.ejs') +
+    eejs.require('ep_markdown_toc/templates/markdownButton.ejs') + args.content;
+  return cb();
+};
+
+exports.eejsBlock_dd_view = (hookName, args, cb) => {
+  args.content += '<li><a href="#" id="markdown-toc-toggle-menu">Markdown TOC</a></li>';
   return cb();
 };
 

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "ep_markdown_toc",
   "description": "Provides markdown-based heading detection and TOC for Etherpad, used in Octomode.",
-  "version": "1.0.6",
+  "version": "1.0.10",
   "author": {
     "name": "hrk",
     "email": "heerko@hackersanddesigners.nl"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/heerko/ep_markdown_toc"
+    "url": "git+https://github.com/heerko/ep_markdown_toc.git"
   },
   "dependencies": {
     "showdown": "*"

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

@@ -3,6 +3,7 @@
 let _editorInfo = null; // Both no longer used atm, but leaving them for now.
 let _ace;
 const tags = ['h1', 'h2', 'h3', 'h4'];
+let plainPasteEnabled = true;
 
 /* Load the css in the editor iframe */
 exports.aceEditorCSS = function() {
@@ -15,6 +16,9 @@ exports.aceEditorCSS = function() {
 exports.postAceInit = (hook, context) => {
   // store a reference to the editor for later
   _ace = context.ace;
+  // Initialize plain paste handler (if enabled).
+  maybeInitPlainPaste(context);
+  initShortcutBlocker(context);
   updateTOC();
 };
 
@@ -71,6 +75,14 @@ exports.postToolbarInit = () => {
     $('#markdown-cheat').toggleClass('popup-show');
   });
 
+  const toggleToc = (event) => {
+    if (event) event.preventDefault();
+    $('#options-hideToc').click();
+  };
+
+  $('#markdown-toc-toggle').on('click', toggleToc);
+  $('#markdown-toc-toggle-menu').on('click', toggleToc);
+
   initSettingsUI();
 };
 
@@ -153,6 +165,7 @@ but it maybe possible to manipulate the list from settings.json?
 */
 function initSettingsUI() {
   const padcookie = require('ep_etherpad-lite/static/js/pad_cookie').padcookie;
+  const plainPaste = require('./plain_paste');
 
   let prefs = padcookie.getPref('userPrefs') || {};
 
@@ -161,14 +174,14 @@ 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);
   }
+  if (typeof prefs.plainPaste === 'undefined') {
+    prefs.plainPaste = true; // default to on
+    padcookie.setPref('userPrefs', prefs);
+  }
 
   // apply the headings class to the inner iframe if set
   const padOuter = document.querySelector('iframe[name="ace_outer"]');
@@ -201,8 +214,23 @@ function initSettingsUI() {
   }
 
   bindToggleSetting('#options-hideToc', 'hide-toc', 'hideToc');
-  bindToggleSetting('#options-hideButtons', 'hide-buttons', 'hideButtons');
   bindToggleSetting('#options-styleHeadings', 'style-md-headings', 'styleHeadings');
+
+  // Plain paste toggle
+  const plainPasteCheckbox = $('#options-plainPaste');
+  plainPasteCheckbox.prop('checked', prefs.plainPaste === true);
+  plainPasteEnabled = prefs.plainPaste === true;
+  plainPasteCheckbox.on('change', function () {
+    const isChecked = $(this).is(':checked');
+    prefs.plainPaste = isChecked;
+    plainPasteEnabled = isChecked;
+    padcookie.setPref('userPrefs', prefs);
+    if (isChecked) {
+      plainPaste.ensure(context);
+    } else {
+      plainPaste.disable();
+    }
+  });
 }
 
 /* functions stolen from ep_headings2 */
@@ -217,4 +245,43 @@ exports.aceAttribsToClasses = (hookName, context) => {
   if (context.key === 'heading') {
     return [`heading:${context.value}`];
   }
-};
+};
+
+/*
+ Plain paste integration: init if enabled and available.
+*/
+function maybeInitPlainPaste(context) {
+  if (!plainPasteEnabled) return;
+  //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/static/js/plain_paste.js

@@ -0,0 +1,60 @@
+// Force plain-text paste: intercept paste and insert text/plain only.
+let bound = false;
+let currentBody = null;
+let currentHandler = null;
+
+// Locate the inner editor window either from context or via DOM.
+const getInnerWindow = (context) => {
+  if (context?.editorInfo?.ace_innerWin) return context.editorInfo.ace_innerWin;
+  const outer = document.querySelector('iframe[name="ace_outer"]');
+  const inner = outer?.contentDocument?.querySelector('iframe[name="ace_inner"]');
+  return inner?.contentWindow || null;
+};
+
+const install = (context) => {
+  if (bound) return;
+
+  const editor = context?.editorInfo?.editor;
+  const callWithAce =
+    editor && typeof editor.callWithAce === 'function'
+      ? editor.callWithAce.bind(editor)
+      : null;
+  const innerWin = getInnerWindow(context);
+  const body = innerWin?.document?.body;
+
+  if (!callWithAce || !body) return;
+
+  const handlePaste = (e) => {
+    const clipboard = e.clipboardData || (e.originalEvent && e.originalEvent.clipboardData);
+    const text = clipboard
+      ? clipboard.getData('text/plain') || clipboard.getData('text')
+      : '';
+    if (!text) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation?.();
+    callWithAce((ace) => {
+      if (!ace || typeof ace.ace_getRep !== 'function' || typeof ace.ace_replaceRange !== 'function') return;
+      const rep = ace.ace_getRep();
+      if (!rep || !rep.selStart || !rep.selEnd) return;
+      ace.ace_replaceRange(rep.selStart, rep.selEnd, text);
+    }, 'plain-paste', true);
+  };
+
+  body.addEventListener('paste', handlePaste, true);
+  bound = true;
+  currentBody = body;
+  currentHandler = handlePaste;
+};
+
+exports.ensure = (context) => install(context);
+
+exports.disable = () => {
+  if (bound && currentBody && currentHandler) {
+    currentBody.removeEventListener('paste', currentHandler, true);
+  }
+  bound = false;
+  currentBody = null;
+  currentHandler = null;
+};

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,14 +4,14 @@
         <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>
+        <input type="checkbox" id="options-styleHeadings" />
+        <label for="options-styleHeadings" aria-label="Enable/Disable styling of the markdown headings">Style Markdown headings</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>
+        <input type="checkbox" id="options-plainPaste" />
+        <label for="options-plainPaste" aria-label="Force plain-text paste">Force plain-text paste</label>
     </p>
-</fieldset>
+</fieldset>

package/templates/tocToggleButton.ejs

@@ -0,0 +1,6 @@
+<li data-key="ep_markdown_toc-toggle" data-type="button">
+  <a id="ep_markdown_toc-a" title="Toggle TOC">
+    <button id="markdown-toc-toggle" class="buttonicon buttonicon-insertunorderedlist" title="Toggle TOC"></button>
+  </a>
+</li>
+<li class="separator"></li>