@aquera/nile-elements 0.1.67-beta-1.1 → 0.1.67-beta-1.3

package/dist/src/{nile-slider/nile-slider.css.d.ts → nile-rich-text-editor/nile-rich-text-editor.css.d.ts}

@@ -1,6 +1,3 @@
-/**
-* Slider CSS
-*/
 export declare const styles: import("lit").CSSResult;
 declare const _default: import("lit").CSSResult[];
 export default _default;

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js

@@ -0,0 +1,93 @@
+// rte-styles.ts
+import { css } from 'lit';
+export const styles = css `
+  /* Host positioning for overlays */
+  nile-rich-text-editor { position: relative; display: block; font-family: inherit; }
+
+       
+nile-rte-toolbar-item > nile-button::part(base) {
+ 
+  width:32px; height:32px; padding:0px 6px;
+  border: none;
+}
+ 
+ 
+
+
+      .toolbar, nile-rte-toolbar {
+        display:flex; align-items:center; gap:8px; padding:8px; 
+        border:1px solid #e5e7eb; border-bottom:none; border-radius:8px 8px 0 0; background:#fff;
+      }
+
+      nile-rte-toolbar-item > button, .toolbar button, nile-rte-toolbar button {
+        border:1px solid #e5e7eb; background:#fff; border-radius:6px;
+        cursor:pointer;
+      }
+
+  
+      /* Ensure clicks hit the button (not nested icon internals) */
+      nile-rte-toolbar-item > button nile-icon { pointer-events:none; }
+
+      nile-rte-toolbar-item > button.active { border-color:#2563eb; background:#eff6ff; }
+      nile-rte-select select { height:32px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; }
+      nile-rte-color input[type="color"] { height:32px; width:36px; border:1px solid #e5e7eb; padding:0; border-radius:6px; background:#fff; }
+      nile-rte-divider { width:1px; height:20px; background:#e5e7eb; display:inline-block; margin:0 4px; }
+
+       .editor p { margin:1em 0; }
+      .editor h1 { font-size:2em   }
+      .editor h2 { font-size:1.5em  }
+      .editor h3 { font-size:1.17em  }
+      .editor h4 { font-size:1em  }
+      .editor h5 { font-size:0.83em  }
+      .editor h6 { font-size:0.67em  }
+
+      .editor { min-height:160px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none;   white-space: pre-wrap;
+  tab-size: 4;           
+  -moz-tab-size: 4;       }
+      nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; }
+
+      .rte-color-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--nile-color-border, #d9d9d9);
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.rte-color-trigger .glyph-stack {
+  display: grid;               /* stack vertically */
+  grid-auto-rows: max-content; 
+  align-items: center;
+  justify-items: center;
+  line-height: 1;
+}
+
+.rte-color-trigger .glyph {
+  font-size: 14px;
+  line-height: 1;
+  margin-bottom: 2px;          /* little breathing space above underline */
+}
+
+.rte-color-trigger .underline {
+  width: 18px;
+  height: 3px;
+  border-radius: 2px;
+  background: currentColor;    /* we override via JS with backgroundColor */
+}
+
+/* (unchanged) highlight square */
+.rte-color-trigger .swatch-box {
+  width: 18px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.35);
+  background: currentColor;    /* overridden via JS */
+}
+
+`;
+export default [styles];
+//# sourceMappingURL=nile-rich-text-editor.css.js.map

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-rich-text-editor.css.js","sourceRoot":"","sources":["../../../src/nile-rich-text-editor/nile-rich-text-editor.css.ts"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["// rte-styles.ts\nimport { css } from 'lit';\n\nexport const styles = css`\n  /* Host positioning for overlays */\n  nile-rich-text-editor { position: relative; display: block; font-family: inherit; }\n\n       \nnile-rte-toolbar-item > nile-button::part(base) {\n \n  width:32px; height:32px; padding:0px 6px;\n  border: none;\n}\n \n \n\n\n      .toolbar, nile-rte-toolbar {\n        display:flex; align-items:center; gap:8px; padding:8px; \n        border:1px solid #e5e7eb; border-bottom:none; border-radius:8px 8px 0 0; background:#fff;\n      }\n\n      nile-rte-toolbar-item > button, .toolbar button, nile-rte-toolbar button {\n        border:1px solid #e5e7eb; background:#fff; border-radius:6px;\n        cursor:pointer;\n      }\n\n  \n      /* Ensure clicks hit the button (not nested icon internals) */\n      nile-rte-toolbar-item > button nile-icon { pointer-events:none; }\n\n      nile-rte-toolbar-item > button.active { border-color:#2563eb; background:#eff6ff; }\n      nile-rte-select select { height:32px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; }\n      nile-rte-color input[type=\"color\"] { height:32px; width:36px; border:1px solid #e5e7eb; padding:0; border-radius:6px; background:#fff; }\n      nile-rte-divider { width:1px; height:20px; background:#e5e7eb; display:inline-block; margin:0 4px; }\n\n       .editor p { margin:1em 0; }\n      .editor h1 { font-size:2em   }\n      .editor h2 { font-size:1.5em  }\n      .editor h3 { font-size:1.17em  }\n      .editor h4 { font-size:1em  }\n      .editor h5 { font-size:0.83em  }\n      .editor h6 { font-size:0.67em  }\n\n      .editor { min-height:160px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none;   white-space: pre-wrap;\n  tab-size: 4;           \n  -moz-tab-size: 4;       }\n      nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; }\n\n      .rte-color-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--nile-color-border, #d9d9d9);\n  border-radius: 6px;\n  background: #fff;\n  cursor: pointer;\n}\n\n.rte-color-trigger .glyph-stack {\n  display: grid;               /* stack vertically */\n  grid-auto-rows: max-content; \n  align-items: center;\n  justify-items: center;\n  line-height: 1;\n}\n\n.rte-color-trigger .glyph {\n  font-size: 14px;\n  line-height: 1;\n  margin-bottom: 2px;          /* little breathing space above underline */\n}\n\n.rte-color-trigger .underline {\n  width: 18px;\n  height: 3px;\n  border-radius: 2px;\n  background: currentColor;    /* we override via JS with backgroundColor */\n}\n\n/* (unchanged) highlight square */\n.rte-color-trigger .swatch-box {\n  width: 18px;\n  height: 16px;\n  border-radius: 4px;\n  border: 1px solid rgba(0,0,0,0.35);\n  background: currentColor;    /* overridden via JS */\n}\n\n`;\n\nexport default [styles];"]}

package/dist/src/nile-rich-text-editor/nile-rich-text-editor.d.ts

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+import './nile-rte-toolbar';
+import './nile-rte-toolbar-item';
+import './nile-rte-select';
+import './nile-rte-color';
+import './nile-rte-divider';
+import './nile-rte-preview';
+import './nile-rte-mentions';
+type MentionsConfig = Record<string, {
+    key: string;
+    label: string;
+}[]>;
+export declare class NileRichTextEditor extends LitElement {
+    protected createRenderRoot(): this;
+    protected shouldUpdate(): boolean;
+    /** Initial HTML content */
+    value: string;
+    /** Optional mentions config (can also be on <nile-rte-mentions mentions="...">) */
+    mentions: MentionsConfig;
+    private content;
+    private editorEl;
+    private previewEl;
+    private toolbarEl;
+    private lastRange;
+    private buttonMap;
+    private headingSelect;
+    private fontSelect;
+    private colorInput;
+    private bgColorInput;
+    private colorSwatchEl;
+    private bgSwatchEl;
+    private mentionsEl;
+    private injectCss;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private ensureEditor;
+    private wireEditor;
+    private onEditorKeydown;
+    private wireAuthoredToolbar;
+    private onSelectionChange;
+    private saveSelection;
+    private restoreSelection;
+    private focusAndRestore;
+    private insertList;
+    private afterListEdit;
+    private ensureAtLeastOneParagraph;
+    private onToolbarCommand;
+    private setBtnActive;
+    private updateToolbarState;
+    private syncPreview;
+    private updateContent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-rich-text-editor': NileRichTextEditor;
+    }
+}
+export {};