@aquera/nile-elements 1.0.4-beta-1.2 → 1.0.4-beta-1.4

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

@@ -0,0 +1,152 @@
+import { css } from 'lit';
+export const styles = css `
+  .editor { all: revert; }
+
+  nile-rich-text-editor {
+    position: relative;
+    display: block;
+    font-family: inherit;
+  }
+
+
+  .rte-container {
+    width: 100%;
+    border: 1px solid var(--nile-colors-neutral-400);
+    border-radius: var(--nile-radius-radius-xl);
+    background: var(--nile-colors-neutral-100);
+    box-sizing: border-box;
+  }
+
+ 
+.rte-container nile-rte-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px;
+  border-bottom: 1px solid var(--nile-colors-neutral-400);
+  background: var(--nile-colors-neutral-100);
+  border-radius: 8px 8px 0 0;
+
+  width: 100%;            
+  box-sizing: border-box; 
+}
+
+
+  .rte-container .editor {
+    min-height: 160px;
+    width: 100%;
+    padding: 12px;
+    background: var(--nile-colors-neutral-100);
+    border-radius: 0 0 8px 8px;
+    outline: none;
+    tab-size: 4;
+    -moz-tab-size: 4;
+    word-break: break-word;
+    box-sizing: border-box;
+    border-radius: var(--nile-radius-radius-xl);
+  }
+
+ 
+nile-rte-preview {
+  display: block;
+  width: 100%;
+  margin-top: 16px;       
+  padding: 12px;
+  border: 1px dashed var(--nile-colors-neutral-400);
+  border-radius: var(--nile-radius-radius-xl);
+  background: var(--nile-colors-neutral-100);
+  box-sizing: border-box;
+  word-wrap: break-word;
+}
+
+
+
+  nile-rte-toolbar-item nile-button::part(base) {
+    width: 32px;
+    height: 32px;
+    padding: 0px 6px;
+    border: none;
+  }
+
+  nile-rte-toolbar-item > button,
+  nile-rte-toolbar button {
+    border: 1px solid var(--nile-colors-neutral-400);
+    background: var(--nile-colors-neutral-100);
+    border-radius: var(--nile-radius-radius-lg);
+    cursor: pointer;
+  }
+
+  nile-rte-toolbar-item > button nile-icon { pointer-events: none; }
+
+  nile-rte-toolbar-item > button.active {
+    border-color: #2563eb;
+    background: var(--nile-colors-neutral-100);
+  }
+
+  /* Heading normalization */
+  .editor p { margin: 1em 0; }
+  .editor h1, .preview h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+    font-weight: bold;
+  }
+  .editor h2, .preview h2 {
+    font-size: 1.5em;
+    margin: 0.83em 0;
+    font-weight: bold;
+  }
+  .editor h3 { font-size: 1.17em; }
+  .editor h4 { font-size: 1em; }
+  .editor h5 { font-size: 0.83em; }
+  .editor h6 { font-size: 0.67em; }
+
+
+  .editor.single-line {
+    min-height: 50px;
+    max-height: 50px;
+    overflow-x: auto;
+    white-space: nowrap;
+    padding: 0px 12px 0px 12px;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  nile-rte-preview.single-line {
+    min-height: 50px;
+    max-height: 50px;
+    padding: 0px 12px 0px 12px;
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  nile-rte-divider { 
+  margin: 0 4px;
+  display: inline-block;
+  height: 24px;
+  width: 1px;
+  background: var(--nile-colors-neutral-400);
+  }
+ 
+  .editor ul,
+.editor ol {
+  list-style-position: inside;  
+  padding: 0px;
+}
+
+
+ 
+ 
+
+  nile-rte-toolbar-item  nile-button[data-active]::part(base) {
+  background-color: var(--nile-colors-primary-400);
+}
+
+nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
+  background-color: var(--nile-colors-primary-500);  
+}
+
+
+
+`;
+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":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":[" \nimport { css } from 'lit';\n\nexport const styles = css`\n  .editor { all: revert; }\n\n  nile-rich-text-editor {\n    position: relative;\n    display: block;\n    font-family: inherit;\n  }\n\n\n  .rte-container {\n    width: 100%;\n    border: 1px solid var(--nile-colors-neutral-400);\n    border-radius: var(--nile-radius-radius-xl);\n    background: var(--nile-colors-neutral-100);\n    box-sizing: border-box;\n  }\n\n \n.rte-container nile-rte-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px;\n  border-bottom: 1px solid var(--nile-colors-neutral-400);\n  background: var(--nile-colors-neutral-100);\n  border-radius: 8px 8px 0 0;\n\n  width: 100%;            \n  box-sizing: border-box; \n}\n\n\n  .rte-container .editor {\n    min-height: 160px;\n    width: 100%;\n    padding: 12px;\n    background: var(--nile-colors-neutral-100);\n    border-radius: 0 0 8px 8px;\n    outline: none;\n    tab-size: 4;\n    -moz-tab-size: 4;\n    word-break: break-word;\n    box-sizing: border-box;\n    border-radius: var(--nile-radius-radius-xl);\n  }\n\n \nnile-rte-preview {\n  display: block;\n  width: 100%;\n  margin-top: 16px;       \n  padding: 12px;\n  border: 1px dashed var(--nile-colors-neutral-400);\n  border-radius: var(--nile-radius-radius-xl);\n  background: var(--nile-colors-neutral-100);\n  box-sizing: border-box;\n  word-wrap: break-word;\n}\n\n\n\n  nile-rte-toolbar-item nile-button::part(base) {\n    width: 32px;\n    height: 32px;\n    padding: 0px 6px;\n    border: none;\n  }\n\n  nile-rte-toolbar-item > button,\n  nile-rte-toolbar button {\n    border: 1px solid var(--nile-colors-neutral-400);\n    background: var(--nile-colors-neutral-100);\n    border-radius: var(--nile-radius-radius-lg);\n    cursor: pointer;\n  }\n\n  nile-rte-toolbar-item > button nile-icon { pointer-events: none; }\n\n  nile-rte-toolbar-item > button.active {\n    border-color: #2563eb;\n    background: var(--nile-colors-neutral-100);\n  }\n\n  /* Heading normalization */\n  .editor p { margin: 1em 0; }\n  .editor h1, .preview h1 {\n    font-size: 2em;\n    margin: 0.67em 0;\n    font-weight: bold;\n  }\n  .editor h2, .preview h2 {\n    font-size: 1.5em;\n    margin: 0.83em 0;\n    font-weight: bold;\n  }\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\n  .editor.single-line {\n    min-height: 50px;\n    max-height: 50px;\n    overflow-x: auto;\n    white-space: nowrap;\n    padding: 0px 12px 0px 12px;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n  nile-rte-preview.single-line {\n    min-height: 50px;\n    max-height: 50px;\n    padding: 0px 12px 0px 12px;\n    overflow-x: auto;\n    white-space: nowrap;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n  nile-rte-divider { \n  margin: 0 4px;\n  display: inline-block;\n  height: 24px;\n  width: 1px;\n  background: var(--nile-colors-neutral-400);\n  }\n \n  .editor ul,\n.editor ol {\n  list-style-position: inside;  \n  padding: 0px;\n}\n\n\n \n \n\n  nile-rte-toolbar-item  nile-button[data-active]::part(base) {\n  background-color: var(--nile-colors-primary-400);\n}\n\nnile-rte-toolbar-item nile-button[data-active]::part(base):hover {\n  background-color: var(--nile-colors-primary-500);  \n}\n\n\n\n`;\n\nexport default [styles];\n"]}

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

@@ -0,0 +1,63 @@
+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';
+import './nile-rte-link';
+type MentionsConfig = Record<string, {
+    key: string;
+    label: string;
+}[]>;
+export declare class NileRichTextEditor extends LitElement {
+    protected createRenderRoot(): this;
+    value: string;
+    singleLineEditor: boolean;
+    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 containerEl;
+    private mentionsEl;
+    private injectCss;
+    connectedCallback(): void;
+    private ensureStructure;
+    private updateContentWithMention;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, any>): void;
+    private ensureEditor;
+    private unwrapMention;
+    private scrubBrokenMentions;
+    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 {};