@limetech/lime-elements 37.44.3 → 37.45.1

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [37.45.1](https://github.com/Lundalogik/lime-elements/compare/v37.45.0...v37.45.1) (2024-05-31)
+
+
+### Bug Fixes
+
+
+* **text-editor:** throw error if the content type is not supported ([b5183e6](https://github.com/Lundalogik/lime-elements/commit/b5183e62202be3127146ced823e02daec3884ff8))
+
+### Performance Improvements
+
+
+* **text-editor:** destroy view on disconnect ([2acbf8c](https://github.com/Lundalogik/lime-elements/commit/2acbf8cc59396079aa7c99a64620955385e7fffa))
+
+## [37.45.0](https://github.com/Lundalogik/lime-elements/compare/v37.44.3...v37.45.0) (2024-05-29)
+
+
+### Features
+
+
+* **editor menu:** add commands for toggling blocks and lists ([e4d9ed8](https://github.com/Lundalogik/lime-elements/commit/e4d9ed880137de282964acad8ae4e2c8a12d0a13))
+* **text-editor:** add support for `code` and `code-block` formatting ([d3d724b](https://github.com/Lundalogik/lime-elements/commit/d3d724b65b0feee43f7598ecd71c706e3ed53e6e))
+* **text-editor:** add support for `strikethrough` formatting ([985efb1](https://github.com/Lundalogik/lime-elements/commit/985efb1a624d266d85221185614a1029e6f9ec0a))
+
 ## [37.44.3](https://github.com/Lundalogik/lime-elements/compare/v37.44.2...v37.44.3) (2024-05-28)
 
 

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

@@ -16542,6 +16542,9 @@ const EditorMenuTypes = {
   Link: 'link',
   OrderedList: 'ordered_list',
   BulletList: 'bullet_list',
+  Strikethrough: 'strikethrough',
+  Code: 'code',
+  CodeBlock: 'code_block',
 };
 /**
  * `LevelMapping` is used to map string identifiers to numerical header levels.
@@ -16574,7 +16577,7 @@ const setActiveMethodForNode = (command, nodeType, level) => {
     const { $from } = state.selection;
     const node = $from.node($from.depth);
     if (node && node.type.name === nodeType.name) {
-      if (nodeType.name === 'heading') {
+      if (nodeType.name === LevelMapping.Heading && level) {
         return node.attrs.level === level;
       }
       return true;
@@ -16619,14 +16622,44 @@ const getAttributes = (markName, url) => {
 const isExternalLink = (url) => {
   return !url.startsWith(window.location.origin);
 };
+const toggleBlockType = (schema, type, attrs = {}, wrap = false) => {
+  const blockType = schema.nodes[type];
+  const paragraphType = schema.nodes.paragraph;
+  return (state, dispatch) => {
+    const { $from, to } = state.selection;
+    if (state.selection instanceof TextSelection &&
+      $from.sameParent($from.doc.resolve(to))) {
+      if ($from.parent.type === blockType) {
+        if (dispatch) {
+          dispatch(state.tr.setBlockType($from.pos, to, paragraphType));
+        }
+        return true;
+      }
+      else {
+        if (wrap) {
+          return wrapIn(blockType, attrs)(state, dispatch);
+        }
+        else {
+          return setBlockType(blockType, attrs)(state, dispatch);
+        }
+      }
+    }
+    return false;
+  };
+};
 const createSetNodeTypeCommand = (schema, nodeType, level) => {
   const type = schema.nodes[nodeType];
   if (!type) {
     throw new Error(`Node type "${nodeType}" not found in schema`);
   }
   let command;
-  if (nodeType === 'heading' && level) {
-    command = setBlockType(type, { level: level });
+  if (nodeType === LevelMapping.Heading && level) {
+    command = toggleBlockType(schema, LevelMapping.Heading, {
+      level: level,
+    });
+  }
+  else if (nodeType === EditorMenuTypes.CodeBlock) {
+    command = toggleBlockType(schema, EditorMenuTypes.CodeBlock);
   }
   else {
     command = setBlockType(type);
@@ -16639,16 +16672,50 @@ const createWrapInCommand = (schema, nodeType) => {
   if (!type) {
     throw new Error(`Node type "${nodeType}" not found in schema`);
   }
-  const command = wrapIn(type);
+  let command;
+  if (nodeType === EditorMenuTypes.Blockquote) {
+    command = toggleBlockType(schema, EditorMenuTypes.Blockquote, {}, true);
+  }
+  else {
+    command = wrapIn(type);
+  }
   setActiveMethodForWrap(command, type);
   return command;
 };
+const toggleList = (listType) => {
+  return (state, dispatch) => {
+    const { $from, $to } = state.selection;
+    const range = $from.blockRange($to);
+    if (!range) {
+      return false;
+    }
+    const wrapping = range && findWrapping(range, listType);
+    if (wrapping) {
+      // Wrap the selection in a list
+      if (dispatch) {
+        dispatch(state.tr.wrap(range, wrapping).scrollIntoView());
+      }
+      return true;
+    }
+    else {
+      // Check if we are in a list item and lift out of the list
+      const liftRange = range && liftTarget(range);
+      if (liftRange !== null) {
+        if (dispatch) {
+          dispatch(state.tr.lift(range, liftRange).scrollIntoView());
+        }
+        return true;
+      }
+      return false;
+    }
+  };
+};
 const createListCommand = (schema, listType) => {
   const type = schema.nodes[listType];
   if (!type) {
     throw new Error(`List type "${listType}" not found in schema`);
   }
-  const command = wrapInList(type);
+  const command = toggleList(type);
   setActiveMethodForWrap(command, type);
   return command;
 };
@@ -16656,15 +16723,18 @@ const commandMapping = {
   strong: createToggleMarkCommand,
   em: createToggleMarkCommand,
   underline: createToggleMarkCommand,
+  strikethrough: createToggleMarkCommand,
+  code: createToggleMarkCommand,
+  link: createToggleMarkCommand,
   headerlevel1: (schema) => createSetNodeTypeCommand(schema, LevelMapping.Heading, LevelMapping.one),
   headerlevel2: (schema) => createSetNodeTypeCommand(schema, LevelMapping.Heading, LevelMapping.two),
   headerlevel3: (schema) => createSetNodeTypeCommand(schema, LevelMapping.Heading, LevelMapping.three),
-  blockquote: createWrapInCommand,
+  blockquote: (schema) => createWrapInCommand(schema, EditorMenuTypes.Blockquote),
   /* eslint-disable camelcase */
-  ordered_list: createListCommand,
-  bullet_list: createListCommand,
+  code_block: (schema) => createSetNodeTypeCommand(schema, EditorMenuTypes.CodeBlock),
+  ordered_list: (schema) => createListCommand(schema, EditorMenuTypes.OrderedList),
+  bullet_list: (schema) => createListCommand(schema, EditorMenuTypes.BulletList),
   /* eslint-enable camelcase */
-  link: createToggleMarkCommand,
 };
 class MenuCommandFactory {
   constructor(schema) {
@@ -16684,6 +16754,9 @@ class MenuCommandFactory {
       'Mod-Shift-1': this.getCommand(EditorMenuTypes.HeaderLevel1),
       'Mod-Shift-2': this.getCommand(EditorMenuTypes.HeaderLevel2),
       'Mod-Shift-3': this.getCommand(EditorMenuTypes.HeaderLevel3),
+      'Mod-Shift-X': this.getCommand(EditorMenuTypes.Strikethrough),
+      'Mod-`': this.getCommand(EditorMenuTypes.Code),
+      'Mod-Shift-C': this.getCommand(EditorMenuTypes.CodeBlock),
     };
   }
 }
@@ -16713,6 +16786,30 @@ const textEditorMenuItems = [
     iconOnly: true,
     selected: false,
   },
+  {
+    value: EditorMenuTypes.Strikethrough,
+    text: 'Strikethrough',
+    commandText: `${mod} ${shift} X`,
+    icon: '-lime-text-strikethrough',
+    iconOnly: true,
+    selected: false,
+  },
+  {
+    value: EditorMenuTypes.Code,
+    text: 'Code',
+    commandText: `${mod} \``,
+    icon: '-lime-text-code',
+    iconOnly: true,
+    selected: false,
+  },
+  {
+    value: EditorMenuTypes.CodeBlock,
+    text: 'Code Block',
+    commandText: `${mod} ${shift} C`,
+    icon: '-lime-text-code-block',
+    iconOnly: true,
+    selected: false,
+  },
   { separator: true },
   {
     value: EditorMenuTypes.HeaderLevel1,
@@ -16771,9 +16868,12 @@ const menuTranslationIDs = {
   /* eslint-disable camelcase */
   bullet_list: 'editor-menu.bulleted-list',
   ordered_list: 'editor-menu.numbered-list',
+  code_block: 'editor-menu.code-block',
   /* eslint-enable camelcase */
   blockquote: 'editor-menu.blockquote',
   link: 'editor-menu.link',
+  strikethrough: 'editor-menu.strikethrough',
+  code: 'editor-menu.code',
 };
 
 /* eslint-disable no-bitwise */
@@ -25396,6 +25496,12 @@ class MarkdownSerializerState {
     }
 }
 
+const customMarkdownSerializer = new MarkdownSerializer(Object.assign({}, defaultMarkdownSerializer.nodes), Object.assign(Object.assign({}, defaultMarkdownSerializer.marks), { strikethrough: {
+    open: '~~',
+    close: '~~',
+    mixable: true,
+    expelEnclosingWhitespace: true,
+  } }));
 /**
  * @private
  */
@@ -25409,7 +25515,7 @@ class markdownConverter {
         return '';
       }
       else {
-        return defaultMarkdownSerializer.serialize(view.state.doc);
+        return customMarkdownSerializer.serialize(view.state.doc);
       }
     };
   }
@@ -25436,6 +25542,18 @@ class HTMLConverter {
   }
 }
 
+const strikethrough = {
+  parseDOM: [
+    { tag: 's' },
+    { tag: 'del' },
+    { tag: 'strike' },
+    { style: 'text-decoration=line-through' },
+  ],
+  toDOM: () => {
+    return ['s', 0];
+  },
+};
+
 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) limel-action-bar{order:1}:host(limel-prosemirror-adapter) div#editor{order:2;height:100%}:host(limel-prosemirror-adapter) div[contenteditable=true]{height:100%}*{box-sizing:border-box}.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}limel-action-bar{--action-bar-border-radius:0.25rem;position:sticky;z-index:1;top:1px;background-color:rgba(var(--contrast-200), 0.5);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);opacity:0.6;transition:opacity 0.5s ease;margin:0 1px;width:calc(100% - 2px)}:host(limel-prosemirror-adapter:focus-within) limel-action-bar,:host(limel-prosemirror-adapter:hover) limel-action-bar{opacity:1}.ProseMirror{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}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 ProsemirrorAdapter = class {
@@ -25528,13 +25646,19 @@ const ProsemirrorAdapter = class {
       index.h("limel-action-bar", { accessibleLabel: "Toolbar", actions: this.actionBarItems, onItemSelected: this.handleActionBarItem }),
     ];
   }
+  disconnectedCallback() {
+    this.view.destroy();
+  }
   setupContentConverter() {
-    /* eslint-disable multiline-ternary */
-    this.contentConverter =
-      this.contentType === 'markdown'
-        ? new markdownConverter()
-        : new HTMLConverter();
-    /* eslint-enable multiline-ternary */
+    if (this.contentType === 'markdown') {
+      this.contentConverter = new markdownConverter();
+    }
+    else if (this.contentType === 'html') {
+      this.contentConverter = new HTMLConverter();
+    }
+    else {
+      throw new Error(`Unsupported content type: ${this.contentType}. Only 'markdown' and 'html' are supported.`);
+    }
   }
   async initializeTextEditor() {
     this.schema = this.initializeSchema();
@@ -25551,7 +25675,9 @@ const ProsemirrorAdapter = class {
   initializeSchema() {
     return new Schema({
       nodes: addListNodes(schema$1.spec.nodes, 'paragraph block*', 'block'),
-      marks: schema$1.spec.marks,
+      marks: schema$1.spec.marks.append({
+        strikethrough: strikethrough,
+      }),
     });
   }
   async parseInitialContent() {