@aquera/nile-elements 1.9.5 → 1.9.7

package/dist/nile-wysiwyg-editor/nile-wysiwyg-toolbar/nile-wysiwyg-toolbar.css.esm.js

@@ -0,0 +1,244 @@
+import{css as o}from"lit";const r=o`
+  :host {
+    display: block;
+    font-family: var(
+      --nile-font-family-sans-serif,
+      var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
+    );
+  }
+
+  .toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 8px;
+    border-bottom: 1px solid
+      var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));
+    border-radius: 8px 8px 0 0;
+    box-sizing: border-box;
+  }
+
+  .toolbar__divider {
+    width: 1px;
+    height: 24px;
+    margin: 0 4px;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));
+  }
+
+  button.toolbar__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0 6px;
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));
+    cursor: pointer;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  button.toolbar__button:hover:not(:disabled) {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));
+  }
+
+  button.toolbar__button[data-active] {
+    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
+  }
+
+  button.toolbar__button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* --- Dropdown selects (heading / font / size), nile-rte-select style --- */
+  .toolbar__dropdown {
+    position: relative;
+    display: inline-flex;
+  }
+
+  button.toolbar__dd-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 6px 0 10px;
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));
+    cursor: pointer;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+    font-family: inherit;
+    font-size: 13px;
+    white-space: nowrap;
+  }
+
+  button.toolbar__dd-trigger:hover:not(:disabled) {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));
+  }
+
+  button.toolbar__dd-trigger:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .toolbar__dd-menu {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    z-index: 30;
+    min-width: 140px;
+    max-height: 260px;
+    overflow-y: auto;
+    padding: 4px;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));
+    border: 1px solid
+      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
+    box-sizing: border-box;
+  }
+
+  .toolbar__dd-item {
+    display: flex;
+    align-items: center;
+    padding: 6px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 13px;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+    white-space: nowrap;
+  }
+
+  .toolbar__dd-item:hover {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));
+  }
+
+  .toolbar__dd-item[data-active] {
+    background: var(
+      --nile-colors-primary-50,
+      var(--ng-componentcolors-utility-blue-50, #eff4ff)
+    );
+    color: var(--nile-colors-primary-700, #1d4ed8);
+  }
+
+  /* --- Color pickers, nile-rte-color style --- */
+  .toolbar__color {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .toolbar__color .glyph-stack {
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  .toolbar__color .glyph {
+    font-size: 14px;
+    margin-bottom: 2px;
+    font-weight: 400;
+  }
+
+  .toolbar__color .underline {
+    width: 18px;
+    height: 3px;
+    border-radius: 2px;
+  }
+
+  .toolbar__color .swatch-box {
+    width: 18px;
+    height: 16px;
+    border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.35);
+    pointer-events: none;
+    box-sizing: border-box;
+  }
+
+  .toolbar__swatch-panel {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    z-index: 30;
+    width: 235px;
+    padding: 12px;
+    background: var(--nile-colors-white-base, #ffffff);
+    border: 1px solid
+      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
+    box-sizing: border-box;
+  }
+
+  .toolbar__swatch-panel .title {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: var(--nile-colors-dark-900, #111);
+  }
+
+  .toolbar__swatch-panel .section {
+    margin-bottom: 12px;
+  }
+
+  .toolbar__swatch-panel .section:last-child {
+    margin-bottom: 0;
+  }
+
+  .toolbar__swatch-panel .swatches {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 24px);
+    gap: 8px;
+  }
+
+  .toolbar__swatch-panel .swatch {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    position: relative;
+    padding: 0;
+    background-clip: content-box;
+  }
+
+  .toolbar__swatch-panel .swatch .checkmark {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 13px;
+    color: white;
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  }
+
+  .toolbar__swatch-panel .swatch.add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 16px;
+    background: #fff;
+  }
+
+  .toolbar__color input[type='color'] {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    width: 0;
+    height: 0;
+    border: 0;
+    padding: 0;
+  }
+`;export{r as s};

package/dist/nile-wysiwyg-editor/nile-wysiwyg-toolbar/nile-wysiwyg-toolbar.esm.js

@@ -0,0 +1,137 @@
+import{__decorate as e}from"tslib";import{html as t,nothing as l}from"lit";import{property as a,state as n,customElement as i}from"lit/decorators.js";import{N as o}from"../../internal/nile-element.esm.js";import{r as s}from"../../internal/glyph.esm.js";import{s as c}from"./nile-wysiwyg-toolbar.css.esm.js";import{D as r}from"../types.esm.js";import"../ui/table-grid-picker.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";const d=["#000000","#444444","#666666","#999999","#cccccc","#eeeeee","#ffffff","#d32f2f","#f44336","#ff9800","#ffeb3b","#4caf50","#2196f3","#3f51b5","#9c27b0","#03a9f4","#00bcd4","#009688","#8bc34a","#cddc39","#ffc107","#ff5722"],b={undo:{kind:"button",command:"undo",label:"Undo (Ctrl+Z)",icon:"undo",disabled:e=>!e.canUndo},redo:{kind:"button",command:"redo",label:"Redo (Ctrl+Y)",icon:"redo",disabled:e=>!e.canRedo},findReplace:{kind:"button",command:"openFind",label:"Find & replace (Ctrl+F)",icon:"ng-text-search"},bold:{kind:"button",command:"bold",label:"Bold (Ctrl+B)",icon:"format_bold",active:e=>e.bold},italic:{kind:"button",command:"italic",label:"Italic (Ctrl+I)",icon:"format_italic",active:e=>e.italic},underline:{kind:"button",command:"underline",label:"Underline (Ctrl+U)",icon:"format_underline",active:e=>e.underline},strike:{kind:"button",command:"strike",label:"Strikethrough",icon:"ng-strikethrough",active:e=>e.strike},subscript:{kind:"button",command:"subscript",label:"Subscript (Ctrl+,)",icon:"ng-subscript",active:e=>e.subscript},superscript:{kind:"button",command:"superscript",label:"Superscript (Ctrl+.)",icon:"ng-superscript",active:e=>e.superscript},code:{kind:"button",command:"code",label:"Inline code",text:"</>",active:e=>e.code},alignLeft:{kind:"button",command:"align",attrs:{align:"left"},label:"Align left",icon:"format_align_left",active:e=>"left"===e.align},alignCenter:{kind:"button",command:"align",attrs:{align:"center"},label:"Align center",icon:"format_align_middle",active:e=>"center"===e.align},alignRight:{kind:"button",command:"align",attrs:{align:"right"},label:"Align right",icon:"format_align_right",active:e=>"right"===e.align},alignJustify:{kind:"button",command:"align",attrs:{align:"justify"},label:"Justify",icon:"format_align_justify",active:e=>"justify"===e.align},bulletList:{kind:"button",command:"bulletList",label:"Bulleted list",icon:"format_list_bulleted",active:e=>e.inBulletList},orderedList:{kind:"button",command:"orderedList",label:"Numbered list",icon:"format_list_numbered",active:e=>e.inOrderedList},taskList:{kind:"button",command:"taskList",label:"Checklist",icon:"ng-list-checks",active:e=>e.inTaskList},indent:{kind:"button",command:"indent",label:"Increase indent (Ctrl+])",icon:"ng-list-indent-increase",disabled:e=>e.inCodeBlock},outdent:{kind:"button",command:"outdent",label:"Decrease indent (Ctrl+[)",icon:"ng-list-indent-decrease",disabled:e=>!(e.inBulletList||e.inOrderedList||e.inTaskList||e.inBlockquote||0!==e.blockIndent)},listStyle:{kind:"select",label:"List style",options:e=>e?.inOrderedList?[{value:"",label:"1, 2, 3"},{value:"lower-alpha",label:"a, b, c"},{value:"upper-alpha",label:"A, B, C"},{value:"lower-roman",label:"i, ii, iii"},{value:"upper-roman",label:"I, II, III"},{value:"multilevel",label:"1.1, 1.1.1"}]:[{value:"",label:"• Disc"},{value:"circle",label:"○ Circle"},{value:"square",label:"▪ Square"}],value:e=>e.listStyle??"",command:e=>({name:"setListStyle",attrs:{style:e||null}}),disabled:e=>!e.inBulletList&&!e.inOrderedList},blockquote:{kind:"button",command:"blockquote",label:"Blockquote",text:"❝",active:e=>e.inBlockquote},link:{kind:"button",command:"openLink",label:"Link (Ctrl+K)",icon:"link_2",active:e=>e.linkActive},bookmark:{kind:"button",command:"openBookmark",label:"Insert bookmark (in-text anchor)",icon:"ng-bookmark"},horizontalRule:{kind:"button",command:"horizontalRule",label:"Horizontal rule",icon:"minus"},specialChars:{kind:"button",command:"openSpecialChars",label:"Special characters",text:"Ω"},emoji:{kind:"button",command:"openEmoji",label:"Emoji",icon:"ng-smile"},codeBlock:{kind:"button",command:"codeBlock",label:"Code block (Ctrl+Alt+C)",icon:"ng-code",active:e=>e.inCodeBlock},image:{kind:"button",command:"openImage",label:"Insert image",icon:"image_2"},embed:{kind:"button",command:"openEmbed",label:"Embed video (YouTube, Vimeo, Loom)",icon:"ng-video"},sourceView:{kind:"button",command:"toggleSource",label:"HTML source",icon:"ng-code-xml"},showBlocks:{kind:"button",command:"toggleShowBlocks",label:"Show blocks",icon:"ng-square-pilcrow",active:e=>!!e.showBlocks},clearFormatting:{kind:"button",command:"clearFormatting",label:"Clear formatting",icon:"format_clear"},pastePlainText:{kind:"button",command:"togglePastePlainText",label:"Paste as plain text",icon:"ng-clipboard-paste",active:e=>!!e.pasteAsPlainText},fullscreen:{kind:"button",command:"toggleFullscreen",label:"Fullscreen (Esc to exit)",icon:"ng-maximize-2",iconActive:"ng-minimize-2",active:e=>!!e.fullscreen},shortcutHelp:{kind:"button",command:"openShortcutHelp",label:"Keyboard shortcuts (Ctrl+/)",icon:"ng-keyboard"},exportPdf:{kind:"button",command:"exportPdf",label:"Export to PDF",icon:"ng-printer"},exportWord:{kind:"button",command:"exportWord",label:"Export to Word",icon:"ng-file-text"},exportInlineHtml:{kind:"button",command:"exportInlineHtml",label:"Export HTML with inline styles (email)",icon:"ng-file-code"},importMarkdown:{kind:"button",command:"openMarkdown",label:"Insert from Markdown",icon:"ng-clipboard-paste"},importWord:{kind:"button",command:"importWord",label:"Import from Word",icon:"ng-file-input"},formatPainter:{kind:"button",command:"toggleFormatPainter",label:"Format painter (copy formatting)",icon:"ng-paintbrush",active:e=>!!e.formatPainter},caseChange:{kind:"select",label:"Change case",options:[{value:"",label:"Case"},{value:"upper",label:"UPPERCASE"},{value:"lower",label:"lowercase"},{value:"title",label:"Title Case"},{value:"sentence",label:"Sentence case"}],value:()=>"",command:e=>({name:"changeCase",attrs:{textCase:e||"upper"}}),disabled:e=>e.selectionEmpty},mergeField:{kind:"button",command:"openMergeField",label:"Insert merge field",icon:"ng-braces"},template:{kind:"button",command:"openTemplate",label:"Insert template",icon:"ng-layout-template"},math:{kind:"button",command:"openMath",label:"Insert math (LaTeX)",icon:"ng-sigma"},heading:{kind:"select",label:"Paragraph style",options:[{value:"",label:"Paragraph"},{value:"1",label:"Heading 1"},{value:"2",label:"Heading 2"},{value:"3",label:"Heading 3"},{value:"4",label:"Heading 4"},{value:"5",label:"Heading 5"},{value:"6",label:"Heading 6"}],value:e=>e.headingLevel?String(e.headingLevel):"",command:e=>""===e?{name:"paragraph"}:{name:"heading",attrs:{level:Number(e)}}},fontFamily:{kind:"select",label:"Font family",options:[{value:"",label:"Font"},...["Arial","Georgia","Tahoma","Times New Roman","Trebuchet MS","Verdana","Courier New"].map((e=>({value:e,label:e})))],value:e=>e.fontFamily??"",command:e=>({name:"fontFamily",attrs:{family:e||null}})},fontSize:{kind:"select",label:"Font size",options:[{value:"",label:"Size"},...["10px","12px","14px","16px","18px","20px","24px","28px","32px","48px"].map((e=>({value:e,label:e.replace("px","")})))],value:e=>e.fontSize??"",command:e=>({name:"fontSize",attrs:{size:e||null}})},lineHeight:{kind:"select",label:"Line height",options:[{value:"",label:"Spacing"},{value:"1",label:"1"},{value:"1.15",label:"1.15"},{value:"1.5",label:"1.5"},{value:"2",label:"2"},{value:"2.5",label:"2.5"},{value:"3",label:"3"}],value:e=>e.lineHeight??"",command:e=>({name:"lineHeight",attrs:{lineHeight:e||null}}),disabled:e=>e.inCodeBlock},textColor:{kind:"color",label:"Text color",glyph:"A",command:"textColor",value:e=>e.textColor},bgColor:{kind:"color",label:"Highlight color",glyph:"✎",command:"bgColor",value:e=>e.bgColor}};let m=class extends o{constructor(){super(...arguments),this.config=r,this.disabled=!1,this.openMenu=null,this.recentColors={},this.handleOutsideClick=e=>{this.openMenu&&!e.composedPath().includes(this)&&(this.openMenu=null)}}static get styles(){return[c]}connectedCallback(){super.connectedCallback(),document.addEventListener("mousedown",this.handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("mousedown",this.handleOutsideClick)}toggleMenu(e){this.openMenu=this.openMenu===e?null:e}dispatchCommand(e,t){this.emit("wysiwyg-command",{name:e,attrs:t})}withTooltip(e,l){return t`
+      <nile-lite-tooltip content=${e} placement="bottom">${l}</nile-lite-tooltip>
+    `}renderButton(e){const l=this.toolbarState,a=!(!l||!e.active)&&e.active(l),n=this.disabled||!(!l||!e.disabled)&&e.disabled(l),i=a&&e.iconActive?e.iconActive:e.icon;return this.withTooltip(e.label,t`
+        <button
+          type="button"
+          class="toolbar__button"
+          part="button"
+          aria-label=${e.label}
+          aria-pressed=${a?"true":"false"}
+          ?data-active=${a}
+          ?disabled=${n}
+          @mousedown=${e=>e.preventDefault()}
+          @click=${()=>this.dispatchCommand(e.command,e.attrs)}
+        >
+          ${i?s(i,18):e.text}
+        </button>
+      `)}renderSelect(e,a){const n=this.toolbarState?a.value(this.toolbarState):"",i="function"==typeof a.options?a.options(this.toolbarState):a.options,o=i.find((e=>e.value===n))??i[0],s=this.disabled||!(!this.toolbarState||!a.disabled)&&a.disabled(this.toolbarState),c="fontFamily"===e;return t`
+      <span class="toolbar__dropdown" part="select">
+        ${this.withTooltip(a.label,t`
+            <button
+              type="button"
+              class="toolbar__dd-trigger"
+              aria-label=${a.label}
+              aria-expanded=${this.openMenu===e?"true":"false"}
+              ?disabled=${s}
+              style=${c&&n?`font-family: ${n}`:""}
+              @mousedown=${e=>e.preventDefault()}
+              @click=${()=>this.toggleMenu(e)}
+            >
+              ${o.label}
+              <nile-glyph name="arrowdown" size="16"></nile-glyph>
+            </button>
+          `)}
+        ${this.openMenu===e?t`
+              <div class="toolbar__dd-menu" @mousedown=${e=>e.preventDefault()}>
+                ${i.map((e=>t`
+                    <div
+                      class="toolbar__dd-item"
+                      ?data-active=${e.value===n}
+                      style=${c&&e.value?`font-family: ${e.value}`:""}
+                      @click=${()=>{this.openMenu=null;const{name:t,attrs:l}=a.command(e.value);this.dispatchCommand(t,l)}}
+                    >
+                      ${e.label}
+                    </div>
+                  `))}
+              </div>
+            `:l}
+      </span>
+    `}setColor(e,t,l){this.openMenu=null;const a=this.recentColors[e]??[];this.recentColors={...this.recentColors,[e]:[l,...a.filter((e=>e!==l))].slice(0,8)},this.dispatchCommand(t.command,{color:l})}renderColor(e,a){const n=this.toolbarState?a.value(this.toolbarState):null,i=n??"#000000",o=this.recentColors[e]??[],s="bgColor"===a.command;return t`
+      <span class="toolbar__color" part="color">
+        ${this.withTooltip(a.label,t`
+            <button
+              type="button"
+              class="toolbar__button"
+              aria-label=${a.label}
+              aria-expanded=${this.openMenu===e?"true":"false"}
+              ?disabled=${this.disabled}
+              @mousedown=${e=>e.preventDefault()}
+              @click=${()=>this.toggleMenu(e)}
+            >
+              ${s?t`<span class="swatch-box" style="background: ${i}"></span>`:t`
+                    <span class="glyph-stack">
+                      <span class="glyph">A</span>
+                      <span class="underline" style="background: ${i}"></span>
+                    </span>
+                  `}
+            </button>
+          `)}
+        ${this.openMenu===e?t`
+              <div class="toolbar__swatch-panel" @mousedown=${e=>e.preventDefault()}>
+                <div class="section">
+                  <div class="title">Default</div>
+                  <div class="swatches">
+                    ${d.map((i=>t`
+                        <button
+                          type="button"
+                          class="swatch"
+                          style="background: ${i}"
+                          title=${i}
+                          @click=${()=>this.setColor(e,a,i)}
+                        >
+                          ${n===i?t`<span class="checkmark">✓</span>`:l}
+                        </button>
+                      `))}
+                  </div>
+                </div>
+                ${o.length?t`
+                      <div class="section">
+                        <div class="title">Recently Used</div>
+                        <div class="swatches">
+                          ${o.map((l=>t`
+                              <button
+                                type="button"
+                                class="swatch"
+                                style="background: ${l}"
+                                title=${l}
+                                @click=${()=>this.setColor(e,a,l)}
+                              ></button>
+                            `))}
+                        </div>
+                      </div>
+                    `:l}
+                <div class="section">
+                  <div class="title">Custom</div>
+                  <div class="swatches">
+                    <button
+                      type="button"
+                      class="swatch add"
+                      @click=${e=>{const t=e.currentTarget.closest(".toolbar__color").querySelector('input[type="color"]');t?.click()}}
+                    >
+                      +
+                    </button>
+                  </div>
+                </div>
+              </div>
+            `:l}
+        <input
+          type="color"
+          tabindex="-1"
+          aria-hidden="true"
+          .value=${i}
+          @input=${t=>this.setColor(e,a,t.target.value)}
+        />
+      </span>
+    `}renderItem(e){if("table"===e)return this.withTooltip("Insert table",t`
+          <nile-wysiwyg-table-picker
+            part="button"
+            ?disabled=${this.disabled}
+          ></nile-wysiwyg-table-picker>
+        `);const a=b[e];if(!a)return l;switch(a.kind){case"button":return this.renderButton(a);case"select":return this.renderSelect(e,a);case"color":return this.renderColor(e,a);default:return l}}render(){const e=this.config.split("|").map((e=>e.trim().split(/\s+/).filter(Boolean))).filter((e=>e.length>0));return t`
+      <div class="toolbar" part="toolbar" role="toolbar" aria-label="Text formatting">
+        ${e.map(((e,a)=>t`
+            ${a>0?t`<span class="toolbar__divider"></span>`:l}
+            ${e.map((e=>this.renderItem(e)))}
+          `))}
+      </div>
+    `}};e([a({type:String})],m.prototype,"config",void 0),e([a({type:Boolean,reflect:!0})],m.prototype,"disabled",void 0),e([a({attribute:!1})],m.prototype,"toolbarState",void 0),e([n()],m.prototype,"openMenu",void 0),e([n()],m.prototype,"recentColors",void 0),m=e([i("nile-wysiwyg-toolbar")],m);export{m as N};

package/dist/nile-wysiwyg-editor/types.cjs.js

@@ -0,0 +1,2 @@
+System.register([],function(_export,_context){"use strict";var e;return{setters:[],execute:function execute(){_export("D",e="undo redo findReplace | heading | bold italic underline strike subscript superscript | fontFamily fontSize lineHeight | textColor bgColor | alignLeft alignCenter alignRight alignJustify | bulletList orderedList taskList listStyle indent outdent blockquote | link bookmark table image embed codeBlock math horizontalRule specialChars emoji | mergeField template | formatPainter caseChange clearFormatting pastePlainText showBlocks sourceView | importMarkdown importWord exportInlineHtml exportWord exportPdf | shortcutHelp fullscreen");}};});
+//# sourceMappingURL=types.cjs.js.map

package/dist/nile-wysiwyg-editor/types.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs.js","sources":["../../../src/nile-wysiwyg-editor/types.ts"],"sourcesContent":["import type { CommandAttrs, CommandName } from './engine/commands';\n\n/**\n * Toolbar configuration. The string form uses space-separated item names with\n * `|` as a group divider, e.g. `\"bold italic | heading | link\"`. `\"none\"`\n * hides the toolbar entirely.\n */\nexport type ToolbarConfig = string;\n\n/** Pseudo-commands handled by the host chrome rather than the registry. */\nexport type UiCommandName =\n  | 'openLink'\n  | 'openImage'\n  | 'openEmbed'\n  | 'openBookmark'\n  | 'toggleSource'\n  | 'togglePastePlainText'\n  | 'toggleFullscreen'\n  | 'toggleShowBlocks'\n  | 'openShortcutHelp'\n  | 'openSpecialChars'\n  | 'openEmoji'\n  | 'openFind'\n  | 'exportPdf'\n  | 'exportWord'\n  | 'exportInlineHtml'\n  | 'importWord'\n  | 'toggleFormatPainter'\n  | 'openMergeField'\n  | 'openTemplate'\n  | 'openMath'\n  | 'openMarkdown';\n\n/** Detail payload of the internal `wysiwyg-command` event (toolbar → host). */\nexport interface WysiwygCommandDetail {\n  name: CommandName | UiCommandName;\n  attrs?: CommandAttrs;\n}\n\n/** Mention configuration: trigger character → items. Same shape as the\n * legacy nile-rich-text-editor. */\nexport type MentionsConfig = Record<string, { key: string; label: string }[]>;\n\n/** Reusable content snippet, offered through the \"/\" menu. */\nexport interface SnippetConfig {\n  key: string;\n  label: string;\n  html: string;\n}\n\n/** A mail-merge / personalization placeholder offered in the merge-field picker. */\nexport interface MergeFieldConfig {\n  /** Stable identifier substituted at render time (e.g. `first_name`). */\n  id: string;\n  /** Human-readable label shown in the chip and picker. */\n  label: string;\n}\n\n/** A predefined content structure offered in the template picker. */\nexport interface TemplateConfig {\n  label: string;\n  /** Optional secondary line shown under the label in the picker. */\n  description?: string;\n  /** HTML inserted at the cursor when chosen. */\n  html: string;\n}\n\n/** Detail payload of `nile-change` / `nile-input`. */\nexport interface WysiwygChangeDetail {\n  value: string;\n  json: Record<string, unknown>;\n  /** Alias of `value` for drop-in parity with nile-rich-text-editor. */\n  content: string;\n}\n\nexport const DEFAULT_TOOLBAR =\n  'undo redo findReplace | heading | bold italic underline strike subscript superscript | fontFamily fontSize lineHeight | ' +\n  'textColor bgColor | alignLeft alignCenter alignRight alignJustify | ' +\n  'bulletList orderedList taskList listStyle indent outdent blockquote | ' +\n  'link bookmark table image embed codeBlock math horizontalRule specialChars emoji | ' +\n  'mergeField template | ' +\n  'formatPainter caseChange clearFormatting pastePlainText showBlocks sourceView | ' +\n  'importMarkdown importWord exportInlineHtml exportWord exportPdf | shortcutHelp fullscreen';\n"],"names":["DEFAULT_TOOLBAR"],"mappings":"0HA2EaA,EACX"}

package/dist/nile-wysiwyg-editor/types.esm.js

@@ -0,0 +1 @@
+const e="undo redo findReplace | heading | bold italic underline strike subscript superscript | fontFamily fontSize lineHeight | textColor bgColor | alignLeft alignCenter alignRight alignJustify | bulletList orderedList taskList listStyle indent outdent blockquote | link bookmark table image embed codeBlock math horizontalRule specialChars emoji | mergeField template | formatPainter caseChange clearFormatting pastePlainText showBlocks sourceView | importMarkdown importWord exportInlineHtml exportWord exportPdf | shortcutHelp fullscreen";export{e as D};

package/dist/nile-wysiwyg-editor/ui/bookmark-panel.cjs.js

@@ -0,0 +1,2 @@
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","../../internal/nile-element.cjs.js","../../internal/accessibility/a11y.state.enum.cjs.js","../../internal/accessibility/a11y.property.enum.cjs.js","../../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var o,r,i,e,t,n,s,a,_templateObject,_templateObject2,_templateObject3,_templateObject4,l;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){o=_tslib.__decorate;},function(_lit){r=_lit.css;i=_lit.html;},function(_litDecoratorsJs){e=_litDecoratorsJs.property;t=_litDecoratorsJs.state;n=_litDecoratorsJs.query;s=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){a=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){l=/*#__PURE__*/function(_a){function l(){var _this;_classCallCheck(this,l);_this=_callSuper(this,l,arguments),_this.open=!1,_this.error="";return _this;}_inherits(l,_a);return _createClass(l,[{key:"focusInput",value:function focusInput(){var _this2=this;this.error="",this.updateComplete.then(function(){var _this2$nameInput;_this2.nameInput&&(_this2.nameInput.value=""),(_this2$nameInput=_this2.nameInput)===null||_this2$nameInput===void 0?void 0:_this2$nameInput.focus();});}},{key:"handleSubmit",value:function handleSubmit(o){var _this$nameInput$value,_this$nameInput;o.preventDefault();var r=((_this$nameInput$value=(_this$nameInput=this.nameInput)===null||_this$nameInput===void 0?void 0:_this$nameInput.value)!==null&&_this$nameInput$value!==void 0?_this$nameInput$value:"").trim().replace(/\s+/g,"-");r?(this.error="",this.emit("wysiwyg-bookmark-apply",{id:r})):this.error="Enter a bookmark name.";}},{key:"render",value:function render(){var _this3=this;return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <form\n        class=\"bookmark-panel\"\n        part=\"bookmark-panel\"\n        @submit=","\n        @keydown=","\n      >\n        <label>\n          Bookmark name\n          <input class=\"bookmark-panel__name\" type=\"text\" placeholder=\"section-intro\" />\n        </label>\n        ","\n        <div class=\"actions\">\n          <button type=\"button\" @click=",">\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"primary\">Insert</button>\n        </div>\n      </form>\n    "])),this.handleSubmit,function(o){"Escape"===o.key&&(o.stopPropagation(),_this3.emit("wysiwyg-bookmark-cancel"));},this.error?i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<div class=\"error\">","</div>"])),this.error):i(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["<div class=\"hint\">An invisible anchor you can link to with #name</div>"]))),function(){return _this3.emit("wysiwyg-bookmark-cancel");});}}],[{key:"styles",get:function get(){return[r(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          position: absolute;\n          z-index: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .bookmark-panel {\n          display: flex;\n          flex-direction: column;\n          gap: 8px;\n          min-width: 280px;\n          padding: 12px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: var(--nile-wysiwyg-radius, 8px);\n          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n          font-size: 13px;\n        }\n\n        label {\n          display: flex;\n          flex-direction: column;\n          gap: 4px;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        input {\n          font: inherit;\n          padding: 6px 8px;\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 6px;\n          outline: none;\n        }\n\n        input:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n        }\n\n        .hint {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n        }\n\n        .error {\n          font-size: 12px;\n          color: var(--nile-colors-error-600, #d92d20);\n        }\n\n        .actions {\n          display: flex;\n          gap: 8px;\n          justify-content: flex-end;\n        }\n\n        button {\n          font: inherit;\n          padding: 6px 12px;\n          border-radius: 6px;\n          border: 1px solid transparent;\n          cursor: pointer;\n          background: transparent;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        button.primary {\n          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n          color: #ffffff;\n        }\n      "])))];}}]);}(a);o([e({type:Boolean,reflect:!0})],l.prototype,"open",void 0),o([t()],l.prototype,"error",void 0),o([n(".bookmark-panel__name")],l.prototype,"nameInput",void 0),l=o([s("nile-wysiwyg-bookmark-panel")],l);}};});
+//# sourceMappingURL=bookmark-panel.cjs.js.map

package/dist/nile-wysiwyg-editor/ui/bookmark-panel.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bookmark-panel.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/bookmark-panel.ts"],"sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/**\n * Floating bookmark-insert panel: name an in-text anchor. Emits\n * `wysiwyg-bookmark-apply` detail: { id } and `wysiwyg-bookmark-cancel`.\n */\n@customElement('nile-wysiwyg-bookmark-panel')\nexport class NileWysiwygBookmarkPanel extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private error = '';\n\n  @query('.bookmark-panel__name') nameInput?: HTMLInputElement;\n\n  public static get styles(): CSSResultArray {\n    return [\n      css`\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          position: absolute;\n          z-index: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .bookmark-panel {\n          display: flex;\n          flex-direction: column;\n          gap: 8px;\n          min-width: 280px;\n          padding: 12px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: var(--nile-wysiwyg-radius, 8px);\n          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n          font-size: 13px;\n        }\n\n        label {\n          display: flex;\n          flex-direction: column;\n          gap: 4px;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        input {\n          font: inherit;\n          padding: 6px 8px;\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 6px;\n          outline: none;\n        }\n\n        input:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n        }\n\n        .hint {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n        }\n\n        .error {\n          font-size: 12px;\n          color: var(--nile-colors-error-600, #d92d20);\n        }\n\n        .actions {\n          display: flex;\n          gap: 8px;\n          justify-content: flex-end;\n        }\n\n        button {\n          font: inherit;\n          padding: 6px 12px;\n          border-radius: 6px;\n          border: 1px solid transparent;\n          cursor: pointer;\n          background: transparent;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        button.primary {\n          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n          color: #ffffff;\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.error = '';\n    this.updateComplete.then(() => {\n      if (this.nameInput) this.nameInput.value = '';\n      this.nameInput?.focus();\n    });\n  }\n\n  private handleSubmit(event: Event): void {\n    event.preventDefault();\n    // Anchor ids can't contain whitespace; collapse runs to a single dash.\n    const id = (this.nameInput?.value ?? '').trim().replace(/\\s+/g, '-');\n    if (!id) {\n      this.error = 'Enter a bookmark name.';\n      return;\n    }\n    this.error = '';\n    this.emit('wysiwyg-bookmark-apply', { id });\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <form\n        class=\"bookmark-panel\"\n        part=\"bookmark-panel\"\n        @submit=${this.handleSubmit}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Escape') {\n            e.stopPropagation();\n            this.emit('wysiwyg-bookmark-cancel');\n          }\n        }}\n      >\n        <label>\n          Bookmark name\n          <input class=\"bookmark-panel__name\" type=\"text\" placeholder=\"section-intro\" />\n        </label>\n        ${this.error\n          ? html`<div class=\"error\">${this.error}</div>`\n          : html`<div class=\"hint\">An invisible anchor you can link to with #name</div>`}\n        <div class=\"actions\">\n          <button type=\"button\" @click=${() => this.emit('wysiwyg-bookmark-cancel')}>\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"primary\">Insert</button>\n        </div>\n      </form>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-bookmark-panel': NileWysiwygBookmarkPanel;\n  }\n}\n"],"names":["NileWysiwygBookmarkPanel","l","constructor","this","open","error","_this","_inherits","_a","_createClass","key","value","focusInput","updateComplete","then","_this2$nameInput","nameInput","focus","handleSubmit","event","preventDefault","id","trim","replace","emit","render","_this3","html","_templateObject","_taggedTemplateLiteral","e","stopPropagation","_templateObject2","_templateObject3","get","css","_templateObject4","NileElement","__decorate","property","type","Boolean","reflect","prototype","state","query","customElement"],"mappings":"+8GASaA,CAAAA,uBAAAA,EAAAA,EAAN,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCACuCC,KAAAA,CAAIC,IAAG,CAAA,CAAA,CAAA,CAElCD,KAAAA,CAAKE,KAAAA,CAAG,EAwI1B,QAAAC,KAAA,EApIQC,SAAA,CAAAN,CAAA,CAAAO,EAAA,SAAAC,YAAA,CAAAR,CAAA,GAAAS,GAAA,cAAAC,KAAA,CAmFA,SAAAC,UAAAA,CAAAA,kBACLT,IAAKE,CAAAA,KAAAA,CAAQ,GACbF,IAAKU,CAAAA,cAAAA,CAAeC,IAAK,CAAA,UAAA,KAAAC,gBAAA,CACnBZ,MAAKa,CAAAA,SAAAA,GAAWb,OAAKa,SAAUL,CAAAA,KAAAA,CAAQ,EAC3CR,CAAAA,EAAAA,gBAAAA,CAAAA,MAAAA,CAAKa,SAAWC,UAAAA,gBAAAA,iBAAhBd,gBAAAA,CAAgBc,KAAAA,CAAAA,CAAO,GAE1B,EAEO,GAAAP,GAAA,gBAAAC,KAAA,UAAAO,YAAAA,CAAaC,CAAAA,CAAAA,KAAAA,qBAAAA,CAAAA,eAAAA,CACnBA,CAAMC,CAAAA,cAAAA,CAAAA,CAAAA,CAEN,GAAMC,CAAAA,CAAMlB,CAAAA,EAAAA,qBAAAA,EAAAA,eAAAA,CAAAA,IAAAA,CAAKa,SAAWL,UAAAA,eAAAA,iBAAhBR,eAAAA,CAAgBQ,KAAAA,UAAAA,qBAAAA,UAAAA,qBAAAA,CAAS,EAAIW,EAAAA,IAAAA,CAAAA,CAAAA,CAAOC,QAAQ,MAAQ,CAAA,GAAA,CAAA,CAC3DF,CAILlB,EAAAA,IAAAA,CAAKE,KAAQ,CAAA,EAAA,CACbF,KAAKqB,IAAK,CAAA,wBAAA,CAA0B,CAAEH,EAAAA,CAAAA,CAAAA,CAAAA,CAAAA,EAJpClB,IAAKE,CAAAA,KAAAA,CAAQ,wBAKhB,EAEM,GAAAK,GAAA,UAAAC,KAAA,UAAAc,MAAAA,CAAAA,CACL,KAAAC,MAAA,MAAA,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,whBAIG1B,IAAKe,CAAAA,YAAAA,CACHY,SAAAA,CAAAA,CAAAA,CACI,WAAVA,CAAEpB,CAAAA,GAAAA,GACJoB,EAAEC,eACF5B,CAAAA,CAAAA,CAAAA,MAAAA,CAAKqB,KAAK,yBACX,CAAA,CAAA,EAAA,CAODrB,IAAAA,CAAKE,KACHsB,CAAAA,CAAI,CAAAK,gBAAA,GAAAA,gBAAA,CAAAH,sBAAA,sCAAsB1B,IAAAA,CAAKE,OAC/BsB,CAAI,CAAAM,gBAAA,GAAAA,gBAAA,CAAAJ,sBAAA,gFAAA,CAEyB,iBAAM1B,CAAAA,OAAKqB,IAAK,CAAA,yBAAA,CAAA,IAOtD,CAAA,KAAAd,GAAA,UAAAwB,GAAA,CAnIM,SAAAA,IAAA,CACL,CAAA,MAAO,CACLC,CAAG,CAAAC,gBAAA,GAAAA,gBAAA,CAAAP,sBAAA,yoEA+EN,EAEM,MA1FqCQ,CAAAA,EACAC,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,IAAMC,CAAAA,OAAAA,CAASC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAqB1C,CAAA2C,CAAAA,SAAAA,CAAA,MAAA,CAAA,IAAA,EAAA,CAAA,CAExCL,EAAA,CAAhBM,CAAAA,CAAAA,CAAAA,CAAAA,CAA2B5C,CAAA2C,CAAAA,SAAAA,CAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAEIL,CAAA,CAAA,CAA/BO,EAAM,uBAAsD7C,CAAAA,CAAAA,CAAAA,CAAAA,CAAA2C,SAAA,CAAA,WAAA,CAAA,IAAA,EALlD3C,CAAAA,CAAAA,CAAAA,CAAwBsC,CAAA,CAAA,CADpCQ,EAAc,6BACF9C,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA"}

package/dist/nile-wysiwyg-editor/ui/bookmark-panel.esm.js

@@ -0,0 +1,97 @@
+import{__decorate as o}from"tslib";import{css as r,html as i}from"lit";import{property as e,state as t,query as n,customElement as s}from"lit/decorators.js";import{N as a}from"../../internal/nile-element.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";let l=class extends a{constructor(){super(...arguments),this.open=!1,this.error=""}static get styles(){return[r`
+        :host {
+          font-family: var(
+            --nile-font-family-sans-serif,
+            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
+          );
+          position: absolute;
+          z-index: 20;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .bookmark-panel {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          min-width: 280px;
+          padding: 12px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: var(--nile-wysiwyg-radius, 8px);
+          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
+          font-size: 13px;
+        }
+
+        label {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        input {
+          font: inherit;
+          padding: 6px 8px;
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 6px;
+          outline: none;
+        }
+
+        input:focus {
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+        }
+
+        .hint {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+        }
+
+        .error {
+          font-size: 12px;
+          color: var(--nile-colors-error-600, #d92d20);
+        }
+
+        .actions {
+          display: flex;
+          gap: 8px;
+          justify-content: flex-end;
+        }
+
+        button {
+          font: inherit;
+          padding: 6px 12px;
+          border-radius: 6px;
+          border: 1px solid transparent;
+          cursor: pointer;
+          background: transparent;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        button.primary {
+          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+          color: #ffffff;
+        }
+      `]}focusInput(){this.error="",this.updateComplete.then((()=>{this.nameInput&&(this.nameInput.value=""),this.nameInput?.focus()}))}handleSubmit(o){o.preventDefault();const r=(this.nameInput?.value??"").trim().replace(/\s+/g,"-");r?(this.error="",this.emit("wysiwyg-bookmark-apply",{id:r})):this.error="Enter a bookmark name."}render(){return i`
+      <form
+        class="bookmark-panel"
+        part="bookmark-panel"
+        @submit=${this.handleSubmit}
+        @keydown=${o=>{"Escape"===o.key&&(o.stopPropagation(),this.emit("wysiwyg-bookmark-cancel"))}}
+      >
+        <label>
+          Bookmark name
+          <input class="bookmark-panel__name" type="text" placeholder="section-intro" />
+        </label>
+        ${this.error?i`<div class="error">${this.error}</div>`:i`<div class="hint">An invisible anchor you can link to with #name</div>`}
+        <div class="actions">
+          <button type="button" @click=${()=>this.emit("wysiwyg-bookmark-cancel")}>
+            Cancel
+          </button>
+          <button type="submit" class="primary">Insert</button>
+        </div>
+      </form>
+    `}};o([e({type:Boolean,reflect:!0})],l.prototype,"open",void 0),o([t()],l.prototype,"error",void 0),o([n(".bookmark-panel__name")],l.prototype,"nameInput",void 0),l=o([s("nile-wysiwyg-bookmark-panel")],l);

package/dist/nile-wysiwyg-editor/ui/bubble-menu.cjs.js

@@ -0,0 +1,2 @@
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","../../internal/nile-element.cjs.js","../../internal/glyph.cjs.js","../../internal/accessibility/a11y.state.enum.cjs.js","../../internal/accessibility/a11y.property.enum.cjs.js","../../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var e,i,t,o,r,n,a,_templateObject,_templateObject2,_templateObject3,l;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_lit){i=_lit.css;t=_lit.html;},function(_litDecoratorsJs){o=_litDecoratorsJs.property;r=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){n=_internalNileElementCjsJs.N;},function(_internalGlyphCjsJs){a=_internalGlyphCjsJs.r;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){l=/*#__PURE__*/function(_n){function l(){var _this;_classCallCheck(this,l);_this=_callSuper(this,l,arguments),_this.open=!1,_this.items=[{name:"bold",label:"Bold",icon:"format_bold",active:function active(e){return e.bold;}},{name:"italic",label:"Italic",icon:"format_italic",active:function active(e){return e.italic;}},{name:"underline",label:"Underline",icon:"format_underline",active:function active(e){return e.underline;}},{name:"strike",label:"Strikethrough",icon:"ng-strikethrough",active:function active(e){return e.strike;}},{name:"openLink",label:"Link",icon:"link_2",active:function active(e){return e.linkActive;}}];return _this;}_inherits(l,_n);return _createClass(l,[{key:"render",value:function render(){var _this2=this;var e=this.toolbarState;return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"bubble\" part=\"bubble-menu\" @mousedown=",">\n        ","\n      </div>\n    "])),function(e){return e.preventDefault();},this.items.map(function(i){return t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n            <button\n              type=\"button\"\n              title=","\n              aria-label=","\n              ?data-active=","\n              @click=","\n            >\n              ","\n            </button>\n          "])),i.label,i.label,!!e&&i.active(e),function(){return _this2.emit("wysiwyg-command",{name:i.name});},a(i.icon,16));}));}}],[{key:"styles",get:function get(){return[i(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          position: absolute;\n          z-index: 15;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .bubble {\n          display: flex;\n          gap: 2px;\n          padding: 4px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid\n            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, #d0d5dd));\n          border-radius: var(--nile-wysiwyg-radius, 8px);\n          box-shadow: var(\n            --nile-wysiwyg-popover-shadow,\n            0 4px 12px rgba(16, 24, 40, 0.12)\n          );\n        }\n\n        button {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          width: 26px;\n          height: 26px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          font-size: 13px;\n          font-weight: 600;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        button:hover {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n\n        button[data-active] {\n          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));\n          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));\n        }\n      "])))];}}]);}(n);e([o({type:Boolean,reflect:!0})],l.prototype,"open",void 0),e([o({attribute:!1})],l.prototype,"toolbarState",void 0),l=e([r("nile-wysiwyg-bubble-menu")],l);}};});
+//# sourceMappingURL=bubble-menu.cjs.js.map

package/dist/nile-wysiwyg-editor/ui/bubble-menu.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubble-menu.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/bubble-menu.ts"],"sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { renderGlyph } from '../../internal/glyph';\nimport type { ToolbarState } from '../engine/selection-state';\nimport type { WysiwygCommandDetail } from '../types';\n\ninterface BubbleItem {\n  name: WysiwygCommandDetail['name'];\n  label: string;\n  /** nile-glyph icon name (ng-* names are stroke-drawn). */\n  icon: string;\n  active: (state: ToolbarState) => boolean;\n}\n\n/**\n * Balloon toolbar shown over non-empty selections. The host owns positioning\n * (absolute left/top) and visibility; commands bubble up as\n * `wysiwyg-command` events, same contract as the main toolbar.\n */\n@customElement('nile-wysiwyg-bubble-menu')\nexport class NileWysiwygBubbleMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ attribute: false }) toolbarState?: ToolbarState;\n\n  public static get styles(): CSSResultArray {\n    return [\n      css`\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          position: absolute;\n          z-index: 15;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .bubble {\n          display: flex;\n          gap: 2px;\n          padding: 4px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid\n            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, #d0d5dd));\n          border-radius: var(--nile-wysiwyg-radius, 8px);\n          box-shadow: var(\n            --nile-wysiwyg-popover-shadow,\n            0 4px 12px rgba(16, 24, 40, 0.12)\n          );\n        }\n\n        button {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          width: 26px;\n          height: 26px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          font-size: 13px;\n          font-weight: 600;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        button:hover {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n\n        button[data-active] {\n          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));\n          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));\n        }\n      `,\n    ];\n  }\n\n  /** Same icon set as the main toolbar, so both surfaces look identical. */\n  private items: BubbleItem[] = [\n    { name: 'bold', label: 'Bold', icon: 'format_bold', active: s => s.bold },\n    { name: 'italic', label: 'Italic', icon: 'format_italic', active: s => s.italic },\n    {\n      name: 'underline',\n      label: 'Underline',\n      icon: 'format_underline',\n      active: s => s.underline,\n    },\n    {\n      name: 'strike',\n      label: 'Strikethrough',\n      icon: 'ng-strikethrough',\n      active: s => s.strike,\n    },\n    {\n      name: 'openLink',\n      label: 'Link',\n      icon: 'link_2',\n      active: s => s.linkActive,\n    },\n  ];\n\n  public render(): TemplateResult {\n    const state = this.toolbarState;\n    return html`\n      <div class=\"bubble\" part=\"bubble-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${this.items.map(\n          item => html`\n            <button\n              type=\"button\"\n              title=${item.label}\n              aria-label=${item.label}\n              ?data-active=${state ? item.active(state) : false}\n              @click=${() => this.emit('wysiwyg-command', { name: item.name })}\n            >\n              ${renderGlyph(item.icon, 16)}\n            </button>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-bubble-menu': NileWysiwygBubbleMenu;\n  }\n}\n"],"names":["NileWysiwygBubbleMenu","l","this","open","items","name","label","icon","active","s","bold","italic","underline","strike","linkActive","_this","_inherits","_n","_createClass","key","value","render","_this2","state","toolbarState","html","_templateObject","_taggedTemplateLiteral","e","preventDefault","map","item","_templateObject2","emit","renderGlyph","__decorate","get","css","_templateObject3","NileElement","property","type","Boolean","reflect","prototype","attribute","customElement"],"mappings":"g+GAqBaA,4BAAN,SAAAC,EAAA,qEACuCC,EAAAA,KAAAA,CAAIC,MAAG,CA+D3CD,CAAAA,KAAAA,CAAAE,MAAsB,CAC5B,CAAEC,KAAM,MAAQC,CAAAA,KAAAA,CAAO,OAAQC,IAAM,CAAA,aAAA,CAAeC,OAAQC,QAARD,CAAAA,OAAQC,CAAKA,QAAAA,CAAAA,CAAAA,CAAEC,QACnE,CAAEL,IAAAA,CAAM,SAAUC,KAAO,CAAA,QAAA,CAAUC,IAAM,CAAA,eAAA,CAAiBC,OAAQC,QAARD,CAAAA,OAAQC,CAAKA,QAAAA,CAAAA,CAAAA,CAAEE,UACzE,CACEN,IAAAA,CAAM,YACNC,KAAO,CAAA,WAAA,CACPC,KAAM,kBACNC,CAAAA,MAAAA,CAAQC,QAARD,CAAAA,MAAAA,CAAQC,SAAKA,CAAAA,CAAEG,CAAAA,SAAAA,GAAAA,CAEjB,CACEP,IAAM,CAAA,QAAA,CACNC,MAAO,eACPC,CAAAA,IAAAA,CAAM,kBACNC,CAAAA,MAAAA,CAAQC,QAARD,CAAAA,MAAAA,CAAQC,SAAKA,CAAAA,CAAEI,CAAAA,MAAAA,GAAAA,CAEjB,CACER,IAAM,CAAA,UAAA,CACNC,MAAO,MACPC,CAAAA,IAAAA,CAAM,SACNC,MAAQC,CAAAA,QAARD,CAAAA,MAAQC,CAAAA,CAAAA,QAAKA,CAAAA,EAAEK,UAwBpB,GAAA,CAAA,QAAAC,KAAA,EAtGQC,SAAA,CAAAf,CAAA,CAAAgB,EAAA,SAAAC,YAAA,CAAAjB,CAAA,GAAAkB,GAAA,UAAAC,KAAA,CAkFA,SAAAC,MAAAA,CAAAA,CACL,KAAAC,MAAA,MAAA,GAAMC,CAAAA,EAAQrB,IAAKsB,CAAAA,YAAAA,CACnB,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,2GAC4CC,SAAAA,CAAAA,QAAaA,CAAAA,CAAEC,CAAAA,cAAAA,CAAAA,CAAAA,GAChE3B,IAAKE,CAAAA,KAAAA,CAAM0B,GACXC,CAAAA,SAAAA,CAAAA,QAAQN,CAAAA,CAAI,CAAAO,gBAAA,GAAAA,gBAAA,CAAAL,sBAAA,kPAGAI,CAAKzB,CAAAA,KAAAA,CACAyB,CAAKzB,CAAAA,KAAAA,CACHiB,CAAAA,CAAAA,CAAAA,EAAQQ,EAAKvB,MAAOe,CAAAA,CAAAA,CAAAA,CAC1B,iBAAMrB,CAAAA,MAAK+B,CAAAA,IAAAA,CAAK,iBAAmB,CAAA,CAAE5B,KAAM0B,CAAK1B,CAAAA,IAAAA,CAAAA,CAAAA,GAEvD6B,CAAAA,CAAYH,EAAKxB,IAAM,CAAA,EAAA,CAAA,MAMpC,CAzG2C4B,KAAAA,GAAAA,UAAAA,GAAAA,CAIrC,SAAAC,IAAA,CACL,CAAA,MAAO,CACLC,CAAG,CAAAC,gBAAA,GAAAA,gBAAA,CAAAX,sBAAA,okDAsDN,EA0BM,MAvFkCY,CAAAA,EACGJ,CAAAA,CAAA,CAA3CK,CAAAA,CAAS,CAAEC,IAAAA,CAAMC,OAASC,CAAAA,OAAAA,CAAAA,CAAS,CAAqB3C,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA4C,SAAA,CAAA,MAAA,CAAA,IAAA,EAEzBT,CAAAA,CAAAA,CAAAA,CAAA,CAA/BK,CAAS,CAAA,CAAEK,SAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAqC7C,CAAA4C,CAAAA,SAAAA,CAAA,cAAA,CAAA,IAAA,EAAA,CAAA,CAHjD5C,CAAqBmC,CAAAA,CAAAA,CAAA,CADjCW,CAAAA,CAAc,0BACF9C,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA"}