@limetech/lime-elements 37.25.0 → 37.26.1

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

@@ -15905,120 +15905,133 @@ function exampleSetup(options) {
     }));
 }
 
-/**
- * Creates the full menu for the text editor
- * based on the default menu already in prosemirror-example-setup
- * @param schema - the schema to use for the menu
- *
- * @returns the default menu for the text editor
- */
-const buildFullMenu = (schema) => {
-  const menuItems = buildMenuItems(schema);
-  const { inlineMenu, insertHorizontalRule } = menuItems;
-  const typeMenu = getNewMenu(menuItems.typeMenu);
-  const newHorizontalRule = new MenuItem(Object.assign(Object.assign({}, insertHorizontalRule.spec), { title: 'hr', label: 'hr' }));
-  const historyButtons = menuItems.fullMenu[2];
-  const blockMenu = getBlockMenu(menuItems.blockMenu);
-  return [
-    inlineMenu[0],
-    [newHorizontalRule],
-    ...typeMenu,
-    historyButtons,
-    blockMenu,
-  ];
-};
-const getNewMenu = (typeMenu) => {
-  const headingDropdown = new Dropdown(typeMenu.content[2].content, {
-    label: 'H',
-  });
-  return [[typeMenu.content[0], typeMenu.content[1]], [headingDropdown]];
-};
-const getBlockMenu = (blockMenu) => {
-  // eslint-disable-next-line no-magic-numbers
-  return [...blockMenu[0].slice(0, 5)];
-};
-
-/**
- * The available items for the editor toolbar
- * The values must match the titles of the menuItem
- *
- * {@link MenuItem.spec}
- */
-const allItems = {
-  strong: 'Toggle strong style',
-  emphasis: 'Toggle emphasis',
-  code: 'Toggle code font',
-  link: 'Add or remove link',
-  'horizontal rule': 'hr',
-  paragraph: 'Change to paragraph',
-  'code block': 'Change to code block',
-  'heading 1': 'Change to heading 1',
-  'heading 2': 'Change to heading 2',
-  'heading 3': 'Change to heading 3',
-  'heading 4': 'Change to heading 4',
-  'heading 5': 'Change to heading 5',
-  'heading 6': 'Change to heading 6',
-  undo: 'Undo last change',
-  redo: 'Redo last undone change',
-  'bullet list': 'Wrap in bullet list',
-  'ordered list': 'Wrap in ordered list',
-  'block quote': 'Wrap in block quote',
-  'join above': 'Join with above block',
-  'lift out': 'Lift out of enclosing block',
-};
-const defaultItems = [
-  'strong',
-  'emphasis',
-  'link',
-  'heading 1',
-  'heading 2',
-  'heading 3',
-  'heading 4',
-  'heading 5',
-  'heading 6',
-  'block quote',
-  'bullet list',
-  'ordered list',
-];
-/**
- * Filters the full menu recursively based on the items provided
- *
- * @param menu - The menu to filter
- * @param items - The menu items to display. If undefined, all items will be displayed
- * @returns The filtered menu
- */
-const getFilteredMenu = (menu, items) => {
-  let menuItems = defaultItems.map((item) => allItems[item]);
-  if (items !== undefined) {
-    menuItems = menuItems.concat(items.map((item) => allItems[item]));
+class MenuCommandFactory {
+  constructor(schema) {
+    this.markNames = {
+      bold: 'strong',
+      italic: 'em',
+      underline: 'underline',
+      blockquote: 'blockquote',
+      headerlevel1: 'headerlevel1',
+      headerlevel2: 'headerlevel2',
+      headerlevel3: 'headerlevel3',
+      addorremovelink: 'link',
+      numberedlist: 'ordered_list',
+      list: 'bullet_list',
+    };
+    this.schema = schema;
+  }
+  createCommand(mark) {
+    if (this.markNames[mark]) {
+      mark = this.markNames[mark];
+    }
+    switch (mark) {
+      case 'strong':
+      case 'em':
+      case 'underline':
+        return this.createToggleMarkCommand(mark);
+      case 'paragraph':
+        return this.createSetNodeTypeCommand(mark);
+      case 'headerlevel1':
+      case 'headerlevel2':
+      case 'headerlevel3':
+        return this.createSetNodeTypeCommand('heading', parseInt(mark[mark.length - 1], 10));
+      case 'blockquote':
+        return this.createWrapInCommand(mark);
+      case 'ordered_list':
+      case 'bullet_list':
+        return this.createListCommand(mark);
+      default:
+        throw new Error(`The Mark "${mark}" is not supported`);
+    }
   }
-  return menu
-    .filter((item) => {
-    if (isMenuItem(item)) {
-      return Object.values(menuItems).includes(item.spec.title);
+  createToggleMarkCommand(markName) {
+    const markType = this.schema.marks[markName];
+    if (!markType) {
+      throw new Error(`Mark "${markName}" not found in schema`);
     }
-    else if (isDropdown(item)) {
-      return true;
+    return toggleMark(markType);
+  }
+  createSetNodeTypeCommand(nodeType, level) {
+    const type = this.schema.nodes[nodeType];
+    if (!type) {
+      throw new Error(`Node type "${nodeType}" not found in schema`);
+    }
+    if (nodeType === 'heading' && level) {
+      return setBlockType(type, { level: level });
+    }
+    else {
+      return setBlockType(type);
     }
-    return false;
-  })
-    .filter(Boolean)
-    .map(createFilteredDropdown(items));
-};
-const createFilteredDropdown = (items) => (item) => {
-  if (isDropdown(item)) {
-    return new Dropdown(getFilteredMenu(item.content, items), {
-      label: item.label,
-    });
   }
-  return item;
-};
-const isMenuItem = (item) => {
-  return item.spec !== undefined;
-};
-const isDropdown = (item) => {
-  return item.content !== undefined;
-};
+  createWrapInCommand(nodeType) {
+    const type = this.schema.nodes[nodeType];
+    if (!type) {
+      throw new Error(`Node type "${nodeType}" not found in schema`);
+    }
+    return wrapIn(type);
+  }
+  createListCommand(listType) {
+    const type = this.schema.nodes[listType];
+    if (!type) {
+      throw new Error(`List type "${listType}" not found in schema`);
+    }
+    return wrapInList(type);
+  }
+}
+
+const textEditorMenuItems = [
+  {
+    text: 'Bold',
+    commandText: '⌘ B',
+    icon: 'bold',
+    iconOnly: true,
+  },
+  {
+    text: 'Italic',
+    commandText: '⌘ I',
+    icon: 'italic',
+    iconOnly: true,
+  },
+  {
+    text: 'Add or remove link',
+    commandText: '⌘ shift U',
+    icon: 'link',
+    iconOnly: true,
+  },
+  { separator: true },
+  {
+    text: 'Header Level 1',
+    icon: 'header_1',
+    iconOnly: true,
+  },
+  {
+    text: 'Header Level 2',
+    icon: 'header_2',
+    iconOnly: true,
+  },
+  {
+    text: 'Header Level 3',
+    icon: 'header_3',
+    iconOnly: true,
+  },
+  { separator: true },
+  {
+    text: 'List',
+    icon: 'list',
+    iconOnly: true,
+  },
+  {
+    text: 'Numbered list',
+    icon: 'numbered_list',
+    iconOnly: true,
+  },
+  {
+    text: 'Blockquote',
+    icon: 'quote_right',
+    iconOnly: true,
+  },
+];
 
 const prosemirrorAdapterCss = "@charset \"UTF-8\";:host(limel-prosemirror-adapter){isolation:isolate;display:block}*{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}.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-top:0.75rem}.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}: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  )}div#editor .ProseMirror-menubar{position:sticky !important;z-index:1;top:0;margin-left:-0.75rem;margin-right:-0.75rem;background-color:rgba(var(--contrast-200), 0.5);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}div#editor .ProseMirror-menubar[style*=\"position: fixed\"]{box-shadow:0 0.25rem 0.5rem -0.5rem rgb(var(--color-black), 0.8)}div#editor .ProseMirror-menubar-spacer{display:none}.ProseMirror-menubar{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:0.25rem;align-items:center;padding:0.125rem;border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}.ProseMirror-menuitem{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1;height:1.5rem;min-width:1.5rem;border-radius:0.25rem;color:rgb(var(--contrast-1100));font-size:0.8125rem}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.ProseMirror-menuitem:has(.ProseMirror-menu-active){box-shadow:var(--button-shadow-inset);color:var(--mdc-theme-primary)}.ProseMirror-menuitem:has(.ProseMirror-menu-active) svg{color:var(--mdc-theme-primary)}.ProseMirror-menuitem:has(.ProseMirror-menu-dropdown-menu){box-shadow:var(--button-shadow-inset)}.ProseMirror-menuitem svg{fill:currentColor;height:1rem;color:rgb(var(--contrast-1100))}.ProseMirror-menuseparator{border-radius:1rem;background-color:rgb(var(--contrast-600));width:0.125rem;height:1rem}.ProseMirror-menu-dropdown{position:relative;display:flex;align-items:center;gap:0.5rem;padding:0 0.5rem}.ProseMirror-menu-dropdown:after{content:\"\";border-left:0.25rem solid transparent;border-right:0.25rem solid transparent;border-top:0.25rem solid currentColor}.ProseMirror-menu-dropdown-menu,.ProseMirror-menu-submenu{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}.ProseMirror-menu-dropdown-menu{position:absolute;top:100%;background:rgb(var(--contrast-100));border-radius:0.25rem;padding:0.125rem}.ProseMirror-menu-submenu{position:absolute;background:rgb(var(--contrast-100));border-radius:0.25rem;padding:0.125rem;display:none;min-width:4em;left:100%;top:-0.75rem}.ProseMirror-menu-dropdown-item{transition:background-color 0.2s ease;cursor:pointer;border-radius:0.375rem;min-height:2.5rem;display:flex;align-items:center;width:100%}.ProseMirror-menu-dropdown-item>div{padding:0 1rem;width:100%}.ProseMirror-menu-dropdown-item:not(:has(.ProseMirror-menu-disabled)):hover{background-color:rgb(var(--contrast-300))}.ProseMirror-menu-submenu-wrap{position:relative;margin-right:-0.25rem}.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu{display:block}.ProseMirror-menu-submenu-label{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0.5rem}.ProseMirror-menu-submenu-label:after{content:\"\";border-top:0.25rem solid transparent;border-bottom:0.25rem solid transparent;border-left:0.25rem solid currentColor}.ProseMirror-menu-disabled{opacity:0.3;cursor:default}.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}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))}";
 
@@ -16034,27 +16047,37 @@ const ProsemirrorAdapter = class {
         return this.view.dom.innerHTML;
       }
     };
+    this.handleActionBarItem = (event) => {
+      event.preventDefault();
+      const { text } = event.detail;
+      const mark = text.replace(/\s/g, '').toLowerCase();
+      try {
+        const command = this.menuCommandFactory.createCommand(mark);
+        this.executeCommand(command);
+      }
+      catch (error) {
+        throw new Error(`Error executing command: ${error}`);
+      }
+    };
     this.value = undefined;
     this.view = undefined;
+    this.actionBarItems = [];
   }
-  componentWillLoad() { }
   render() {
-    return h("div", { id: "editor" });
+    return (h("div", null, h("limel-action-bar", { accessibleLabel: "Toolbar", actions: this.actionBarItems, layout: "fullWidth", onItemSelected: this.handleActionBarItem }), h("div", { id: "editor" })));
   }
   componentDidLoad() {
+    this.actionBarItems = textEditorMenuItems;
     const mySchema = new Schema({
       nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
       marks: schema.spec.marks,
     });
-    const menu = buildFullMenu(mySchema)
-      .map((items) => getFilteredMenu(items, undefined))
-      .filter((items) => items.length);
     this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
       state: EditorState.create({
         doc: DOMParser.fromSchema(mySchema).parse(this.host.shadowRoot.querySelector('#editor')),
         plugins: exampleSetup({
           schema: mySchema,
-          menuContent: menu,
+          menuBar: false,
         }),
       }),
       dispatchTransaction: (transaction) => {
@@ -16063,10 +16086,24 @@ const ProsemirrorAdapter = class {
         this.change.emit(this.getHTML());
       },
     });
+    this.menuCommandFactory = new MenuCommandFactory(mySchema);
     if (this.value) {
       this.view.dom.innerHTML = this.value;
     }
   }
+  executeCommand(command) {
+    const { state } = this.view;
+    const selection = state.selection;
+    let transaction = state.tr;
+    if (!selection.empty) {
+      transaction.setSelection(selection);
+    }
+    command(state, (tr) => {
+      transaction = tr;
+    });
+    this.view.dispatch(transaction);
+    this.view.focus();
+  }
   get host() { return getElement(this); }
 };
 ProsemirrorAdapter.style = prosemirrorAdapterCss;