@limetech/lime-elements 37.64.4 → 37.65.0

package/dist/esm/limel-prosemirror-adapter.entry.js

@@ -26128,6 +26128,196 @@ const createNodeSpec = (config) => {
   };
 };
 
+const inserterFactory = (view) => {
+  const startPos = getTriggerStartPosition(view);
+  return {
+    insert: (input) => {
+      const { state, dispatch } = view;
+      const { schema, selection } = state;
+      const { $from } = selection;
+      let node;
+      try {
+        node = createNode(input, schema);
+      }
+      catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error.message);
+        return;
+      }
+      const spaceNode = schema.text(' ');
+      const fragment = schema.nodes.doc.create(null, [node, spaceNode]);
+      const transaction = state.tr.replaceWith(startPos, $from.pos, fragment);
+      transaction.setMeta('stopTrigger', true);
+      dispatch(transaction);
+    },
+  };
+};
+const createNode = (input, schema) => {
+  var _a;
+  if (typeof input === 'string') {
+    return schema.text(input);
+  }
+  const node = input.node;
+  if (typeof node === 'string') {
+    return schema.text(node);
+  }
+  const customNode = getCustomNode(node.tagName, schema);
+  const childNodes = ((_a = input.children) !== null && _a !== void 0 ? _a : [])
+    .map((child) => createNode(child, schema))
+    .filter(Boolean);
+  return customNode.create(node.attributes, childNodes);
+};
+const getCustomNode = (name, schema) => {
+  const customNode = Object.values(schema.nodes).find((prosemirrorNode) => prosemirrorNode.name === name);
+  if (!customNode) {
+    throw new Error(`A custom element hasn't been registered for node ${name}`);
+  }
+  return customNode;
+};
+const getTriggerStartPosition = (view) => {
+  var _a, _b, _c;
+  return (_c = (_b = (_a = view.state) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.$from) === null || _c === void 0 ? void 0 : _c.pos;
+};
+
+const isTrigger = (key, validTriggers) => {
+  return key.length === 1 && validTriggers.includes(key);
+};
+const shouldTrigger = (state) => {
+  const { $from } = state.selection;
+  if ($from.pos === 1) {
+    return true;
+  }
+  // Getting the position immediately before the current selection
+  const prevPos = $from.pos - 1;
+  if (prevPos > 0) {
+    // allow trigger if the cursor is at the start of a new paragraph
+    if ($from.parentOffset === 0) {
+      return true;
+    }
+    const prevChar = state.doc.textBetween(prevPos, $from.pos);
+    return prevChar === ' ' || prevChar === '\n';
+  }
+  return false;
+};
+const stillHasTrigger = (state, activeTrigger, triggerPosition, triggerLength) => {
+  const cursorPosition = state.selection.$from.pos;
+  if (cursorPosition < triggerPosition ||
+    cursorPosition > triggerPosition + triggerLength + 1) {
+    return false;
+  }
+  return (state.doc.textBetween(triggerPosition, triggerPosition + 1) ===
+    activeTrigger);
+};
+const getTriggerEventDetail = (view, trigger, value) => {
+  return {
+    trigger: trigger,
+    textEditor: inserterFactory(view),
+    value: value,
+  };
+};
+const sendTriggerEvent = (type, view, trigger, value) => {
+  const event = new CustomEvent(type, {
+    detail: getTriggerEventDetail(view, trigger, value),
+    bubbles: true,
+    composed: true,
+  });
+  view.dom.dispatchEvent(event);
+};
+const processTransactions = (text, transactions, oldState) => {
+  let textAdded = '';
+  let textRemoved = '';
+  transactions.forEach((transaction) => {
+    if (transaction.docChanged) {
+      transaction.steps.forEach((step) => {
+        if (step instanceof ReplaceStep ||
+          step instanceof ReplaceAroundStep) {
+          const slice = step.slice;
+          const fromPos = step.from;
+          const toPos = step.to;
+          if (slice === null || slice === void 0 ? void 0 : slice.size) {
+            // Text added
+            textAdded += slice.content.textBetween(0, slice.size);
+          }
+          else if (fromPos !== toPos) {
+            // Text removed
+            const removedText = oldState.doc.textBetween(fromPos, toPos);
+            textRemoved += removedText;
+          }
+        }
+      });
+    }
+  });
+  if (textAdded) {
+    text += textAdded;
+  }
+  else if (textRemoved) {
+    text = text.slice(0, -textRemoved.length);
+  }
+  return text;
+};
+const createTriggerPlugin = (triggerCharacters) => {
+  let activeTrigger = null;
+  let triggerText = '';
+  let pluginView = null;
+  let triggerPosition = null;
+  const stopTrigger = () => {
+    triggerText = '';
+    sendTriggerEvent('triggerStop', pluginView, activeTrigger, triggerText);
+    triggerPosition = null;
+    activeTrigger = null;
+  };
+  const handleKeyDown = (view, event) => {
+    const { state } = view;
+    if (event.key === 'Escape') {
+      stopTrigger();
+      return true;
+    }
+    if (isTrigger(event.key, triggerCharacters) && shouldTrigger(state)) {
+      activeTrigger = event.key;
+      triggerText = '';
+      triggerPosition = state.selection.$from.pos - triggerText.length;
+      sendTriggerEvent('triggerStart', view, activeTrigger, triggerText);
+      return false;
+    }
+    return false;
+  };
+  const appendTransactions = (transactions, oldState, newState) => {
+    if (!activeTrigger || !triggerPosition || !pluginView) {
+      return;
+    }
+    if (!stillHasTrigger(newState, activeTrigger, triggerPosition, triggerText.length)) {
+      return;
+    }
+    const updatedText = processTransactions(triggerText, transactions, oldState);
+    if (updatedText !== triggerText) {
+      triggerText = updatedText;
+      sendTriggerEvent('triggerChange', pluginView, activeTrigger, triggerText.slice(1));
+    }
+  };
+  return new Plugin({
+    key: new PluginKey('triggerPlugin'),
+    view: (view) => {
+      pluginView = view;
+      return {};
+    },
+    state: {
+      init: () => {
+        return {};
+      },
+      apply: (transaction) => {
+        if (transaction.getMeta('stopTrigger')) {
+          stopTrigger();
+        }
+        return {};
+      },
+    },
+    props: {
+      handleKeyDown: handleKeyDown,
+    },
+    appendTransaction: appendTransactions,
+  });
+};
+
 const prosemirrorAdapterCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-prosemirror-adapter){display:flex;flex-direction:column}:host(limel-prosemirror-adapter) .toolbar{order:1}:host(limel-prosemirror-adapter) div#editor{order:2;height:100%;flex-grow:1}:host(limel-prosemirror-adapter) div[contenteditable=true]{height:100%}*{box-sizing:border-box}:host(limel-prosemirror-adapter:hover) .toolbar,:host(limel-prosemirror-adapter:focus-within) .toolbar{will-change:grid-template-rows}:host(limel-prosemirror-adapter:hover) limel-action-bar,:host(limel-prosemirror-adapter:focus-within) limel-action-bar{will-change:opacity, padding}:host(limel-prosemirror-adapter:hover) .ProseMirror,:host(limel-prosemirror-adapter:focus-within) .ProseMirror{will-change:padding}.ProseMirror-menubar-wrapper{display:grid;grid-template-rows:auto 1fr}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}.toolbar{--action-bar-border-radius:0.25rem;border-radius:var(--action-bar-border-radius);flex-shrink:0;position:sticky;z-index:1;top:0;width:100%;display:grid;grid-template-rows:var(--limel-prosemirror-adapter-toolbar-grid-template-rows);transition-property:grid-template-rows;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);background-color:rgba(var(--contrast-200), 0.5);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem)}limel-action-bar{min-width:0;transition-property:padding, opacity;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);opacity:var(--limel-prosemirror-adapter-toolbar-opacity);padding:var(--limel-prosemirror-adapter-action-bar-padding-top-bottom, 0.125rem) 0.25rem;background-color:transparent;overflow:hidden}.ProseMirror{transition-duration:padding;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);position:relative;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:\"liga\" 0;padding:var(--limel-text-editor-padding)}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror:focus-visible{outline:none}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-selectednode{outline:0.125rem solid rgb(var(--color-sky-light))}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-2rem;right:-0.125rem;top:-0.125rem;bottom:-0.125rem;border:0.125rem solid rgb(var(--color-sky-light));pointer-events:none}img.ProseMirror-separator{display:inline !important;border:none !important;margin:0 !important}limel-portal{width:25rem}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}code{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}";
 
 const DEBOUNCE_TIMEOUT = 300;
@@ -26229,7 +26419,8 @@ const ProsemirrorAdapter = class {
     this.contentType = 'markdown';
     this.value = undefined;
     this.language = undefined;
-    this.plugins = [];
+    this.customElements = [];
+    this.triggerCharacters = [];
     this.view = undefined;
     this.actionBarItems = [];
     this.link = { href: '' };
@@ -26291,7 +26482,7 @@ const ProsemirrorAdapter = class {
   }
   setupContentConverter() {
     if (this.contentType === 'markdown') {
-      this.contentConverter = new MarkdownConverter(this.plugins);
+      this.contentConverter = new MarkdownConverter(this.customElements);
     }
     else if (this.contentType === 'html') {
       this.contentConverter = new HTMLConverter();
@@ -26315,9 +26506,9 @@ const ProsemirrorAdapter = class {
   }
   initializeSchema() {
     let nodes = schema$1.spec.nodes;
-    this.plugins.forEach((plugin) => {
-      const newNodeSpec = createNodeSpec(plugin);
-      const nodeName = plugin.tagName;
+    this.customElements.forEach((customElement) => {
+      const newNodeSpec = createNodeSpec(customElement);
+      const nodeName = customElement.tagName;
       nodes = nodes.append({ [nodeName]: newNodeSpec });
     });
     nodes = addListNodes(nodes, 'paragraph block*', 'block');
@@ -26346,6 +26537,7 @@ const ProsemirrorAdapter = class {
         ...exampleSetup({ schema: this.schema, menuBar: false }),
         keymap(this.menuCommandFactory.buildKeymap()),
         createLinkPlugin(this.handleNewLinkSelection),
+        createTriggerPlugin(this.triggerCharacters),
         createImageRemoverPlugin(),
         createMenuStateTrackingPlugin(editorMenuTypesArray, this.menuCommandFactory, this.updateActiveActionBarItems),
         createActionBarInteractionPlugin(this.menuCommandFactory),