npm - @limetech/lime-elements - Versions diffs - 37.39.1 → 37.40.1 - Mend

@limetech/lime-elements 37.39.1 → 37.40.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,33 @@
+## [37.40.1](https://github.com/Lundalogik/lime-elements/compare/v37.40.0...v37.40.1) (2024-05-20)
+### Performance Improvements
+* **dock:** avoid re-creating observer whenever menu is opened ([1495948](https://github.com/Lundalogik/lime-elements/commit/149594822df8e5cefb7844a2613592a2c582203c))
+## [37.40.0](https://github.com/Lundalogik/lime-elements/compare/v37.39.1...v37.40.0) (2024-05-20)
+### Features
+* **editor menu:** add menu items ([694fa37](https://github.com/Lundalogik/lime-elements/commit/694fa375920e854e855ca6fb7864df9e303446f6))
+* **text editor:** add command mapping to menu factory ([4224f51](https://github.com/Lundalogik/lime-elements/commit/4224f5193c4c94720c4ab7a2704a6b7d95e50a2d))
+* **text editor:** add editor menu types ([a6ff827](https://github.com/Lundalogik/lime-elements/commit/a6ff82716620a91d1a7338820855cf0be21ac521))
+* **text editor:** add target _blank to external links ([9c0e996](https://github.com/Lundalogik/lime-elements/commit/9c0e996febb26f8662e0c373bbadc6d4562eebe2))
+* **text editor:** add tests for menu command factory ([62ed73c](https://github.com/Lundalogik/lime-elements/commit/62ed73cb48868d11a3612fc3ee76a3e3e0daaec3))
+* **text editor:** implement new menu command handling in adapter ([9ba2779](https://github.com/Lundalogik/lime-elements/commit/9ba277936f8b110ad69ce32635bc9e88d9b4f42e))
+* **text editor:** set getCommand as public function ([8cfb783](https://github.com/Lundalogik/lime-elements/commit/8cfb783370c8c272017b2cdd1059f52e02d5dd4c))
+* **text editor:** use object for types instead of enums ([72b5323](https://github.com/Lundalogik/lime-elements/commit/72b53233511e3f4a95c8c0bb398522f5b0841819))
+### Bug Fixes
+* **menu command mapping:** adjust heading level mapping types ([3109707](https://github.com/Lundalogik/lime-elements/commit/31097074495cf0eb337f5c091011e3f33efafa48))
+* **text editor:** slight refactor of set focus ([8b40f3a](https://github.com/Lundalogik/lime-elements/commit/8b40f3af1ae43b12e15be0b17249370c5a426528))
+* **text editor:** update menu command tests ([9fbd2ae](https://github.com/Lundalogik/lime-elements/commit/9fbd2aecb46205e734775e07765bafac27490fde))
 ## [37.39.1](https://github.com/Lundalogik/lime-elements/compare/v37.39.0...v37.39.1) (2024-05-17)

package/dist/cjs/limel-dock-button.cjs.entry.js CHANGED Viewed

@@ -34,8 +34,15 @@ const DockButton = class {
       event.stopPropagation();
       this.itemSelected.emit(this.item);
     };
-    this.focusCustomComponentElement = () => {
+    this.focusCustomComponentElement = (entries) => {
       var _a, _b, _c;
+      const entry = entries.find((e) => e.target === this.customComponentElement);
+      if (!entry) {
+        return;
+      }
+      if (!entry.isIntersecting) {
+        return;
+      }
       if ((_b = (_a = this.customComponentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.delegatesFocus) {
         (_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
       }
@@ -63,8 +70,15 @@ const DockButton = class {
     if (!this.isOpen) {
       return;
     }
-    const observer = new IntersectionObserver(this.focusCustomComponentElement);
-    observer.observe(this.customComponentElement);
+    if (!this.intersectionObserver) {
+      this.intersectionObserver = new IntersectionObserver(this.focusCustomComponentElement);
+      this.intersectionObserver.observe(this.customComponentElement);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.intersectionObserver = undefined;
   }
   renderPopover() {
     var _a;

package/dist/cjs/limel-dock-button.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-dock-button.entry.cjs.js","mappings":"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","names":["h","createRandomString"],"sources":["./src/components/dock/dock-button/dock-button.scss?tag=limel-dock-button","./src/components/dock/dock-button/dock-button.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n.button {\n all: unset;\n isolation: isolate;\n position: relative;\n\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-dock-item-text-color),\n $background-color: var(--dock-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n\n width: 100%;\n height: var(--dock-item-height);\n\n border-radius: functions.pxToRem(6);\n font-size: functions.pxToRem(14);\n padding: 0 0.5rem;\n min-width: var(--dock-item-height);\n\n &:hover {\n z-index: 1;\n }\n\n &.selected {\n color: var(--limel-dock-item-text-color--selected);\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n\n box-shadow: var(--button-shadow-inset);\n\n &:focus-visible {\n box-shadow: var(--button-shadow-inset),\n var(--shadow-depth-8-focused);\n }\n\n .icon {\n color: var(--limel-dock-item-text--selected);\n }\n }\n}\n\nlimel-popover {\n // makes buttons that are wrapped in a popover become fullwidth\n display: grid;\n grid-template-columns: 100%;\n\n button[slot='trigger'][aria-expanded='true'] {\n box-shadow: var(--button-shadow-inset);\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding-left: 0.5rem;\n padding-right: 0.75rem;\n}\n\n.icon {\n flex-shrink: 0;\n width: calc(var(--dock-item-height) - 1rem);\n height: calc(var(--dock-item-height) - 1rem);\n color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));\n}\n\nlimel-badge {\n position: absolute;\n top: -0.125rem;\n right: -0.125rem;\n}\n\n// 👇 Below is a hidden and private hack\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\n.icon {\n position: relative;\n\n &:before {\n text-align: center;\n pointer-events: none;\n position: absolute;\n inset: 0;\n background: {\n color: var(--dock-background-color, rgb(var(--contrast-100)));\n position: center;\n repeat: no-repeat;\n size: contain;\n image: var(--limel-custom-home-icon);\n }\n // Since `content` defaults to `undefined`\n // no pseudo element will be rendered, unless\n // the consumer defines something.\n content: var(--limel-custom-home-icon-enabler);\n\n .button.selected & {\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-dock-button',\n shadow: false,\n styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n /\n Item that is placed in the dock.\n /\n @Prop()\n public item!: DockItem;\n\n /\n When the dock is expanded or collapsed, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public expanded? = false;\n\n /\n When dock is using mobile layout, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public useMobileLayout? = false;\n\n /\n Fired when a dock item has been selected from the dock.\n /\n @Event()\n public itemSelected: EventEmitter<DockItem>;\n\n /\n Fired when a dock menu is opened.\n /\n @Event()\n public menuOpen: EventEmitter<DockItem>;\n\n /\n Indicated whether the popover that renders a component is open.\n /\n @State()\n private isOpen = false;\n\n /\n Fired when the popover is closed.\n */\n @Event()\n public close: EventEmitter<void>;\n\n private tooltipId: string;\n private customComponentElement: HTMLElement;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public render() {\n if (this.item?.dockMenu?.componentName) {\n return this.renderPopover();\n }\n\n return this.renderButton(this.handleClick);\n }\n\n @Watch('isOpen')\n protected openWatcher() {\n if (!this.isOpen) {\n return;\n }\n\n const observer = new IntersectionObserver(\n this.focusCustomComponentElement,\n );\n observer.observe(this.customComponentElement);\n }\n\n private renderPopover() {\n const CustomComponent = this.item?.dockMenu.componentName;\n\n return (\n <limel-popover\n openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n open={this.isOpen \|\| this.item.dockMenu.menuOpen}\n onClose={this.onPopoverClose}\n >\n {this.renderButton(this.openPopover, 'trigger')}\n <CustomComponent\n ref={this.setCustomComponentElement}\n {...(this.item.dockMenu.props \|\| {})}\n onClose={this.onPopoverClose}\n />\n </limel-popover>\n );\n }\n\n private renderButton(\n handleClick: (event: MouseEvent) => void,\n slot?: string,\n ) {\n return (\n <button\n slot={slot}\n tabindex=\"0\"\n id={this.tooltipId}\n type=\"button\"\n class={{\n button: true,\n selected: this.item?.selected,\n }}\n onClick={handleClick}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n {this.renderNotification()}\n </button>\n );\n }\n\n private renderNotification = () => {\n if (this.item.badge !== undefined) {\n return <limel-badge label={this.item.badge} />;\n }\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n this.menuOpen.emit(this.item);\n };\n\n private setCustomComponentElement = (element: HTMLElement) => {\n this.customComponentElement = element;\n };\n\n private onPopoverClose = () => {\n this.isOpen = false;\n this.close.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.itemSelected.emit(this.item);\n };\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n return <limel-icon name={this.item.icon} class=\"icon\" />;\n }\n\n private renderLabel() {\n if (this.expanded) {\n return <span class=\"text\">{this.item.label}</span>;\n }\n }\n\n private renderTooltip() {\n if (!this.expanded && this.item.label) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.label}\n helperLabel={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n\n if (this.expanded && this.item.helperLabel) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n }\n\n private focusCustomComponentElement = () => {\n if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n this.customComponentElement?.focus();\n }\n };\n\n private getOpenDirection = () => {\n if (this.useMobileLayout) {\n return 'top';\n }\n\n return 'right';\n };\n}\n"],"version":3}
1	+ {"file":"limel-dock-button.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,mpEAAmpE;;MCoB5pE,UAAU;EAiDnB;;;;;IA2EQ,uBAAkB,GAAG;MACzB,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;QAC/B,OAAOA,yBAAa,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,GAAI,CAAC;OAClD;KACJ,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACjC,CAAC;IAEM,8BAAyB,GAAG,CAAC,OAAoB;MACrD,IAAI,CAAC,sBAAsB,GAAG,OAAO,CAAC;KACzC,CAAC;IAEM,mBAAc,GAAG;MACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;MACpB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACrC,CAAC;IAuCM,gCAA2B,GAAG,CAClC,OAAoC;;MAEpC,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CACtB,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,sBAAsB,CAClD,CAAC;MACF,IAAI,CAAC,KAAK,EAAE;QACR,OAAO;OACV;MAED,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;QACvB,OAAO;OACV;MAED,IAAI,MAAA,MAAA,IAAI,CAAC,sBAAsB,0CAAE,UAAU,0CAAE,cAAc,EAAE;QACzD,MAAA,IAAI,CAAC,sBAAsB,0CAAE,KAAK,EAAE,CAAC;OACxC;KACJ,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,IAAI,CAAC,eAAe,EAAE;QACtB,OAAO,KAAK,CAAC;OAChB;MAED,OAAO,OAAO,CAAC;KAClB,CAAC;;oBAxMiB,KAAK;2BAOE,KAAK;kBAkBd,KAAK;IAalB,IAAI,CAAC,SAAS,GAAGC,+BAAkB,EAAE,CAAC;GACzC;EAEM,MAAM;;IACT,IAAI,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,0CAAE,aAAa,EAAE;MACpC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;KAC/B;IAED,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC9C;EAGS,WAAW;IACjB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MACd,OAAO;KACV;IAED,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;MAC5B,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAChD,IAAI,CAAC,2BAA2B,CACnC,CAAC;MACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;KAClE;GACJ;EAEM,oBAAoB;;IACvB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;IACxC,IAAI,CAAC,oBAAoB,GAAG,SAAS,CAAC;GACzC;EAEO,aAAa;;IACjB,MAAM,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,CAAC,aAAa,CAAC;IAE1D,QACID,2BACI,aAAa,EAAE,IAAI,CAAC,eAAe,GAAG,KAAK,GAAG,aAAa,EAC3D,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAChD,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAC/CA,QAAC,eAAe,kBACZ,GAAG,EAAE,IAAI,CAAC,yBAAyB,KAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,KACnC,OAAO,EAAE,IAAI,CAAC,cAAc,IAC9B,CACU,EAClB;GACL;EAEO,YAAY,CAChB,WAAwC,EACxC,IAAa;;IAEb,QACIA,oBACI,IAAI,EAAE,IAAI,EACV,QAAQ,EAAC,GAAG,EACZ,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;QACH,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ;OAChC,EACD,OAAO,EAAE,WAAW,eACV,QAAQ,IAEjB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,kBAAkB,EAAE,CACrB,EACX;GACL;EA4BO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjB,OAAO;KACV;IAED,OAAOA,wBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,MAAM,GAAG,CAAC;GAC5D;EAEO,WAAW;IACf,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAOA,kBAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAQ,CAAC;KACtD;GACJ;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACnC,QACIA,2BACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EACtB,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAClC,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,GACxC,EACJ;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACxC,QACIA,2BACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAC5B,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,GACxC,EACJ;KACL;GACJ;;;;;;;;;","names":["h","createRandomString"],"sources":["./src/components/dock/dock-button/dock-button.scss?tag=limel-dock-button","./src/components/dock/dock-button/dock-button.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n.button {\n all: unset;\n isolation: isolate;\n position: relative;\n\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-dock-item-text-color),\n $background-color: var(--dock-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n\n width: 100%;\n height: var(--dock-item-height);\n\n border-radius: functions.pxToRem(6);\n font-size: functions.pxToRem(14);\n padding: 0 0.5rem;\n min-width: var(--dock-item-height);\n\n &:hover {\n z-index: 1;\n }\n\n &.selected {\n color: var(--limel-dock-item-text-color--selected);\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n\n box-shadow: var(--button-shadow-inset);\n\n &:focus-visible {\n box-shadow: var(--button-shadow-inset),\n var(--shadow-depth-8-focused);\n }\n\n .icon {\n color: var(--limel-dock-item-text--selected);\n }\n }\n}\n\nlimel-popover {\n // makes buttons that are wrapped in a popover become fullwidth\n display: grid;\n grid-template-columns: 100%;\n\n button[slot='trigger'][aria-expanded='true'] {\n box-shadow: var(--button-shadow-inset);\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding-left: 0.5rem;\n padding-right: 0.75rem;\n}\n\n.icon {\n flex-shrink: 0;\n width: calc(var(--dock-item-height) - 1rem);\n height: calc(var(--dock-item-height) - 1rem);\n color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));\n}\n\nlimel-badge {\n position: absolute;\n top: -0.125rem;\n right: -0.125rem;\n}\n\n// 👇 Below is a hidden and private hack\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\n.icon {\n position: relative;\n\n &:before {\n text-align: center;\n pointer-events: none;\n position: absolute;\n inset: 0;\n background: {\n color: var(--dock-background-color, rgb(var(--contrast-100)));\n position: center;\n repeat: no-repeat;\n size: contain;\n image: var(--limel-custom-home-icon);\n }\n // Since `content` defaults to `undefined`\n // no pseudo element will be rendered, unless\n // the consumer defines something.\n content: var(--limel-custom-home-icon-enabler);\n\n .button.selected & {\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-dock-button',\n shadow: false,\n styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n /\n Item that is placed in the dock.\n /\n @Prop()\n public item!: DockItem;\n\n /\n When the dock is expanded or collapsed, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public expanded? = false;\n\n /\n When dock is using mobile layout, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public useMobileLayout? = false;\n\n /\n Fired when a dock item has been selected from the dock.\n /\n @Event()\n public itemSelected: EventEmitter<DockItem>;\n\n /\n Fired when a dock menu is opened.\n /\n @Event()\n public menuOpen: EventEmitter<DockItem>;\n\n /\n Indicated whether the popover that renders a component is open.\n /\n @State()\n private isOpen = false;\n\n /\n Fired when the popover is closed.\n */\n @Event()\n public close: EventEmitter<void>;\n\n private tooltipId: string;\n private customComponentElement: HTMLElement;\n private intersectionObserver?: IntersectionObserver;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public render() {\n if (this.item?.dockMenu?.componentName) {\n return this.renderPopover();\n }\n\n return this.renderButton(this.handleClick);\n }\n\n @Watch('isOpen')\n protected openWatcher() {\n if (!this.isOpen) {\n return;\n }\n\n if (!this.intersectionObserver) {\n this.intersectionObserver = new IntersectionObserver(\n this.focusCustomComponentElement,\n );\n this.intersectionObserver.observe(this.customComponentElement);\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n }\n\n private renderPopover() {\n const CustomComponent = this.item?.dockMenu.componentName;\n\n return (\n <limel-popover\n openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n open={this.isOpen \|\| this.item.dockMenu.menuOpen}\n onClose={this.onPopoverClose}\n >\n {this.renderButton(this.openPopover, 'trigger')}\n <CustomComponent\n ref={this.setCustomComponentElement}\n {...(this.item.dockMenu.props \|\| {})}\n onClose={this.onPopoverClose}\n />\n </limel-popover>\n );\n }\n\n private renderButton(\n handleClick: (event: MouseEvent) => void,\n slot?: string,\n ) {\n return (\n <button\n slot={slot}\n tabindex=\"0\"\n id={this.tooltipId}\n type=\"button\"\n class={{\n button: true,\n selected: this.item?.selected,\n }}\n onClick={handleClick}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n {this.renderNotification()}\n </button>\n );\n }\n\n private renderNotification = () => {\n if (this.item.badge !== undefined) {\n return <limel-badge label={this.item.badge} />;\n }\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n this.menuOpen.emit(this.item);\n };\n\n private setCustomComponentElement = (element: HTMLElement) => {\n this.customComponentElement = element;\n };\n\n private onPopoverClose = () => {\n this.isOpen = false;\n this.close.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.itemSelected.emit(this.item);\n };\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n return <limel-icon name={this.item.icon} class=\"icon\" />;\n }\n\n private renderLabel() {\n if (this.expanded) {\n return <span class=\"text\">{this.item.label}</span>;\n }\n }\n\n private renderTooltip() {\n if (!this.expanded && this.item.label) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.label}\n helperLabel={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n\n if (this.expanded && this.item.helperLabel) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n }\n\n private focusCustomComponentElement = (\n entries: IntersectionObserverEntry[],\n ) => {\n const entry = entries.find(\n (e) => e.target === this.customComponentElement,\n );\n if (!entry) {\n return;\n }\n\n if (!entry.isIntersecting) {\n return;\n }\n\n if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n this.customComponentElement?.focus();\n }\n };\n\n private getOpenDirection = () => {\n if (this.useMobileLayout) {\n return 'top';\n }\n\n return 'right';\n };\n}\n"],"version":3}

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

@@ -15911,78 +15911,114 @@ function exampleSetup(options) {
     }));
 }
-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',
+/**
+ * The `EditorMenuType` type is used to specify the type of menu items that can be added to the editor toolbar.
+ * Each one represents a different type to be used for creating the prosemirror commands relevant to the button.
+ * The values correspond to the types that can be used with the `prosemirror-commands` library.
+ * @beta
+ */
+const EditorMenuTypes = {
+  Bold: 'strong',
+  Italic: 'em',
+  Blockquote: 'blockquote',
+  HeaderLevel1: 'headerlevel1',
+  HeaderLevel2: 'headerlevel2',
+  HeaderLevel3: 'headerlevel3',
+  Link: 'link',
+  OrderedList: 'ordered_list',
+  BulletList: 'bullet_list',
+};
+/**
+ * `LevelMapping` is used to map string identifiers to numerical header levels.
+ * It provides a way to represent different levels of headings in ProseMirror commands.
+ *
+ * The `Heading` identifier is not a valid level and is used to identify the node type.
+ * The numerical values are used for creating ProseMirror commands to set the level of a heading node in the editor.
+ * @beta
+ */
+const LevelMapping = {
+  Heading: 'heading',
+  one: 1,
+  two: 2,
+  three: 3,
+};
+const createToggleMarkCommand = (schema, markName, url) => {
+  const markType = schema.marks[markName];
+  if (!markType) {
+    throw new Error(`Mark "${markName}" not found in schema`);
+  }
+  if (markName === EditorMenuTypes.Link && url) {
+    const attrs = {
+      href: url,
+      target: isExternalLink(url) ? '_blank' : null,
     };
-    this.schema = schema;
+    return toggleMark(markType, attrs);
   }
-  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 toggleMark(markType);
+};
+const isExternalLink = (url) => {
+  return !url.startsWith(window.location.origin);
+};
+const createSetNodeTypeCommand = (schema, nodeType, level) => {
+  const type = schema.nodes[nodeType];
+  if (!type) {
+    throw new Error(`Node type "${nodeType}" not found in schema`);
   }
-  createToggleMarkCommand(markName) {
-    const markType = this.schema.marks[markName];
-    if (!markType) {
-      throw new Error(`Mark "${markName}" not found in schema`);
-    }
-    return toggleMark(markType);
+  if (nodeType === 'heading' && level) {
+    return setBlockType(type, { level: level });
   }
-  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);
-    }
+  else {
+    return setBlockType(type);
   }
-  createWrapInCommand(nodeType) {
-    const type = this.schema.nodes[nodeType];
-    if (!type) {
-      throw new Error(`Node type "${nodeType}" not found in schema`);
-    }
-    return wrapIn(type);
+};
+const createWrapInCommand = (schema, nodeType) => {
+  const type = schema.nodes[nodeType];
+  if (!type) {
+    throw new Error(`Node type "${nodeType}" not found in schema`);
   }
-  createListCommand(listType) {
-    const type = this.schema.nodes[listType];
-    if (!type) {
-      throw new Error(`List type "${listType}" not found in schema`);
+  return wrapIn(type);
+};
+const createListCommand = (schema, listType) => {
+  const type = schema.nodes[listType];
+  if (!type) {
+    throw new Error(`List type "${listType}" not found in schema`);
+  }
+  return wrapInList(type);
+};
+const commandMapping = {
+  strong: createToggleMarkCommand,
+  em: createToggleMarkCommand,
+  underline: 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,
+  /* eslint-disable camelcase */
+  ordered_list: createListCommand,
+  bullet_list: createListCommand,
+  /* eslint-enable camelcase */
+  link: createToggleMarkCommand,
+};
+class MenuCommandFactory {
+  constructor(schema) {
+    this.schema = schema;
+  }
+  getCommand(mark, url) {
+    const commandFunc = commandMapping[mark];
+    if (!commandFunc) {
+      throw new Error(`The Mark "${mark}" is not supported`);
     }
-    return wrapInList(type);
+    return commandFunc(this.schema, mark, url);
+  }
+  buildKeymap() {
+    return {
+      'Mod-B': this.getCommand(EditorMenuTypes.Bold),
+      'Mod-I': this.getCommand(EditorMenuTypes.Italic),
+      'Mod-Shift-1': this.getCommand(EditorMenuTypes.HeaderLevel1),
+      'Mod-Shift-2': this.getCommand(EditorMenuTypes.HeaderLevel2),
+      'Mod-Shift-3': this.getCommand(EditorMenuTypes.HeaderLevel3),
+    };
   }
 }
@@ -15996,14 +16032,14 @@ const getCommandSymbols = () => {
 const { mod, shift } = getCommandSymbols();
 const textEditorMenuItems = [
   {
-    value: 'strong',
+    value: EditorMenuTypes.Bold,
     text: 'Bold',
     commandText: `${mod} B`,
     icon: '-lime-text-bold',
     iconOnly: true,
   },
   {
-    value: 'em',
+    value: EditorMenuTypes.Italic,
     text: 'Italic',
     commandText: `${mod} I`,
     icon: '-lime-text-italic',
@@ -16011,21 +16047,21 @@ const textEditorMenuItems = [
   },
   { separator: true },
   {
-    value: 'headerlevel1',
+    value: EditorMenuTypes.HeaderLevel1,
     text: 'Header Level 1',
     commandText: `${mod} ${shift} 1`,
     icon: '-lime-text-h-heading-1',
     iconOnly: true,
   },
   {
-    value: 'headerlevel2',
+    value: EditorMenuTypes.HeaderLevel2,
     text: 'Header Level 2',
     commandText: `${mod} ${shift} 2`,
     icon: '-lime-text-h-heading-2',
     iconOnly: true,
   },
   {
-    value: 'headerlevel3',
+    value: EditorMenuTypes.HeaderLevel3,
     text: 'Header Level 3',
     commandText: `${mod} ${shift} 3`,
     icon: '-lime-text-h-heading-3',
@@ -16033,19 +16069,19 @@ const textEditorMenuItems = [
   },
   { separator: true },
   {
-    value: 'bullet_list',
+    value: EditorMenuTypes.BulletList,
     text: 'Bullet list',
     icon: '-lime-text-bulleted-list',
     iconOnly: true,
   },
   {
-    value: 'ordered_list',
+    value: EditorMenuTypes.OrderedList,
     text: 'Numbered list',
     icon: '-lime-text-ordered-list',
     iconOnly: true,
   },
   {
-    value: 'blockquote',
+    value: EditorMenuTypes.Blockquote,
     text: 'Blockquote',
     icon: '-lime-text-blockquote',
     iconOnly: true,
@@ -24718,6 +24754,7 @@ const ProsemirrorAdapter = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.change = index.createEvent(this, "change", 7);
+    this.editorKeyMap = {};
     this.initializeTextEditor = async () => {
       this.actionBarItems = textEditorMenuItems;
       const mySchema = new Schema({
@@ -24732,13 +24769,19 @@ const ProsemirrorAdapter = class {
           await this.contentConverter.parseAsHTML(this.value, schema$1);
       }
       const initialDoc = DOMParser.fromSchema(mySchema).parse(initialContentElement);
+      this.menuCommandFactory = new MenuCommandFactory(mySchema);
+      this.editorKeyMap = this.menuCommandFactory.buildKeymap();
+      const keymapPlugin = keymap(this.editorKeyMap);
       this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
         state: EditorState.create({
           doc: initialDoc,
-          plugins: exampleSetup({
-            schema: mySchema,
-            menuBar: false,
-          }),
+          plugins: [
+            ...exampleSetup({
+              schema: mySchema,
+              menuBar: false,
+            }),
+            keymapPlugin,
+          ],
         }),
         dispatchTransaction: (transaction) => {
           const newState = this.view.state.apply(transaction);
@@ -24753,10 +24796,9 @@ const ProsemirrorAdapter = class {
     };
     this.handleActionBarItem = (event) => {
       event.preventDefault();
-      const { text } = event.detail;
-      const mark = text.replace(/\s/g, '').toLowerCase();
+      const { value } = event.detail;
       try {
-        const command = this.menuCommandFactory.createCommand(mark);
+        const command = this.menuCommandFactory.getCommand(value);
         this.executeCommand(command);
       }
       catch (error) {
@@ -24816,7 +24858,11 @@ const ProsemirrorAdapter = class {
       transaction = tr;
     });
     this.view.dispatch(transaction);
-    this.view.focus();
+    this.setFocus();
+  }
+  setFocus() {
+    var _a;
+    (_a = this.view) === null || _a === void 0 ? void 0 : _a.focus();
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {