ep_markdown_toc 1.0.5 → 1.0.8

package/README.md

@@ -1,5 +1,7 @@
 ## Markdown editing in Etherpad
 
+![Plugin demo](./assets/demo.gif)
+
 This plugin enhances Etherpad for Markdown-style writing.
 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.

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.5",
+  "version": "1.0.8",
   "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/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,8 @@ 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);
   updateTOC();
 };
 
@@ -71,6 +74,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 +164,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') || {};
 
@@ -169,6 +181,10 @@ function initSettingsUI() {
     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"]');
@@ -203,6 +219,22 @@ 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 +249,13 @@ 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);
+}

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/tocSettings.ejs

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