@streamscloud/kit 0.2.1 → 0.2.3

package/dist/ui/inputs/pin-input/pin-input-generator.js

@@ -0,0 +1,114 @@
+const CELL_REGEXP = '^\\d{1}$';
+export class PinInputGenerator {
+    _container;
+    _onInput;
+    _count;
+    _secure;
+    _previewDuration;
+    _numeric;
+    _cells;
+    _focusedCellIndex;
+    constructor(container, args) {
+        const { count = 6, secure = false, previewDuration = 200, numeric = true, onInput } = args;
+        this._container = container;
+        this._count = count;
+        this._secure = secure;
+        this._previewDuration = previewDuration;
+        this._cells = [];
+        this._focusedCellIndex = 0;
+        this._numeric = numeric;
+        this._onInput = onInput;
+        this._initCells();
+    }
+    _initCells = () => {
+        for (let i = 0; i < this._count; i++) {
+            const input = document.createElement('input');
+            input.classList.add('pin-input__input');
+            if (this._numeric) {
+                input.setAttribute('inputmode', 'numeric');
+            }
+            this._cells.push(input);
+            this._container.appendChild(input);
+            input.addEventListener('input', (_event) => {
+                const value = input.value;
+                this._onCellChanged(i, value);
+            });
+            const onFocus = () => {
+                this._focusedCellIndex = i;
+                input.classList.toggle('pin-input__input--focused', true);
+                setTimeout(() => {
+                    input.setSelectionRange(0, input.value.length);
+                });
+            };
+            input.addEventListener('focus', onFocus);
+            input.addEventListener('click', onFocus);
+            input.addEventListener('blur', () => {
+                input.classList.toggle('pin-input__input--focused', false);
+            });
+            input.addEventListener('keydown', (event) => {
+                this._onKeyDown(event, i);
+                if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Backspace', 'Delete'].includes(event.key)) {
+                    this._cells[i].setAttribute('type', 'text');
+                }
+            });
+        }
+    };
+    _onCellChanged(index, newVal) {
+        if (!this._isTheCellValid(newVal)) {
+            this._cells[index].classList.remove('pin-input__input--filled');
+            this._cells[index].value = '';
+            this._notifyValueChanged();
+            return;
+        }
+        this._cells[index].classList.add('pin-input__input--filled');
+        if (this._secure && this._previewDuration) {
+            setTimeout(() => {
+                this._cells[index].setAttribute('type', 'password');
+            }, this._previewDuration);
+        }
+        this._notifyValueChanged();
+        this._focusNextCell();
+    }
+    _onKeyDown(e, index) {
+        switch (e.key) {
+            case 'ArrowLeft':
+                this._focusPreviousCell();
+                break;
+            case 'ArrowRight':
+                this._focusNextCell();
+                break;
+            case 'Backspace':
+                if (!this._cells[index].value.length) {
+                    this._focusPreviousCell();
+                    e.preventDefault();
+                }
+        }
+    }
+    _focusPreviousCell() {
+        if (!this._focusedCellIndex) {
+            return;
+        }
+        this._focusCellByIndex(this._focusedCellIndex - 1);
+    }
+    _focusNextCell() {
+        if (this._focusedCellIndex === this._cells.length - 1) {
+            return;
+        }
+        this._focusCellByIndex(this._focusedCellIndex + 1);
+    }
+    _focusCellByIndex(index = 0) {
+        const el = this._cells[index];
+        el.focus();
+        this._focusedCellIndex = index;
+    }
+    _isTheCellValid(cell) {
+        return this._numeric ? !!cell.match(CELL_REGEXP) : cell.length <= 1;
+    }
+    _notifyValueChanged() {
+        let value = '';
+        this._cells.forEach((p) => {
+            value += p.value;
+        });
+        this._onInput(value);
+    }
+}

package/dist/ui/inputs/rich-text-input/cmp.rich-text-input.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">import { InputEmojiPicker, inputEmojiPickerContainer } from '../input-emoji-picker';
+import { default as TinymceInput } from './tinymce-input.svelte';
+let { value, options = undefined, debounce = 0, placeholder = undefined, autofocus = false, disabled = false, rows = 0, emoji = false, borderless = false, on } = $props();
+let insertEmojiToTinymce = $state(null);
+const onEmojiSelected = (emojiChar) => {
+    insertEmojiToTinymce?.(emojiChar);
+};
+</script>
+
+<div class="rich-text-input" class:rich-text-input--has-emoji={emoji} use:inputEmojiPickerContainer>
+  <TinymceInput
+    value={value}
+    options={options}
+    placeholder={placeholder}
+    disabled={disabled}
+    borderless={borderless}
+    rows={rows}
+    autofocus={autofocus || ''}
+    debounce={debounce}
+    on={{
+      change: (e) => on?.change?.(e),
+      mounted: (e) => (insertEmojiToTinymce = e.insertEmoji)
+    }} />
+  {#if emoji}
+    <InputEmojiPicker on={{ select: onEmojiSelected }} />
+  {/if}
+</div>
+
+<!--
+@component
+Rich text editor powered by TinyMCE with optional emoji picker support.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--rich-text-input--root--font-size` | Root font size for em scaling | `1rem` |
+| `--sc-kit--rich-text-input--width` | Container width | `100%` |
+| `--sc-kit--rich-text-input--padding--block` | Block (vertical) padding | `0.5em` |
+| `--sc-kit--rich-text-input--padding--inline` | Inline (horizontal) padding | `0.5em` |
+| `--sc-kit--rich-text-input--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
+| `--sc-kit--rich-text-input--background` | Background color | light-dark white/gray-900 |
+| `--sc-kit--rich-text-input--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
+| `--sc-kit--rich-text-input--border-color` | Border color | light-dark neutral-300/neutral-600 |
+| `--sc-kit--rich-text-input--border-radius` | Border radius | `0.25em` |
+| `--sc-kit--rich-text-input--text--font-size` | Text font size | `0.875em` |
+| `--sc-kit--rich-text-input--text--color` | Text color | light-dark gray-800/white |
+| `--sc-kit--rich-text-input--placeholder--color` | Placeholder color | inherited from border |
+-->
+
+<style>.rich-text-input {
+  position: relative;
+}
+.rich-text-input--has-emoji {
+  --_--input--padding-right: 1.5em;
+}</style>

package/dist/ui/inputs/rich-text-input/cmp.rich-text-input.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { RichTextInputOptions } from './types';
+type Props = {
+    /** HTML content */
+    value: string | null | undefined;
+    /** TinyMCE configuration options */
+    options?: RichTextInputOptions;
+    /** Debounce delay in ms for change events @default 0 */
+    debounce?: number;
+    placeholder?: string;
+    autofocus?: boolean;
+    disabled?: boolean;
+    /** Minimum visible rows @default 0 */
+    rows?: number;
+    /** Show emoji picker trigger */
+    emoji?: boolean;
+    /** Remove border, background, and accent shadow */
+    borderless?: boolean;
+    on: {
+        change: (value: string) => void;
+    };
+};
+/**
+ * Rich text editor powered by TinyMCE with optional emoji picker support.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--rich-text-input--root--font-size` | Root font size for em scaling | `1rem` |
+ * | `--sc-kit--rich-text-input--width` | Container width | `100%` |
+ * | `--sc-kit--rich-text-input--padding--block` | Block (vertical) padding | `0.5em` |
+ * | `--sc-kit--rich-text-input--padding--inline` | Inline (horizontal) padding | `0.5em` |
+ * | `--sc-kit--rich-text-input--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
+ * | `--sc-kit--rich-text-input--background` | Background color | light-dark white/gray-900 |
+ * | `--sc-kit--rich-text-input--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
+ * | `--sc-kit--rich-text-input--border-color` | Border color | light-dark neutral-300/neutral-600 |
+ * | `--sc-kit--rich-text-input--border-radius` | Border radius | `0.25em` |
+ * | `--sc-kit--rich-text-input--text--font-size` | Text font size | `0.875em` |
+ * | `--sc-kit--rich-text-input--text--color` | Text color | light-dark gray-800/white |
+ * | `--sc-kit--rich-text-input--placeholder--color` | Placeholder color | inherited from border |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/inputs/rich-text-input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RichTextInput } from './cmp.rich-text-input.svelte';
+export type { RichTextInputOptions } from './types';

package/dist/ui/inputs/rich-text-input/index.js

@@ -0,0 +1 @@
+export { default as RichTextInput } from './cmp.rich-text-input.svelte';

package/dist/ui/inputs/rich-text-input/rich-text-input-localization.d.ts

@@ -0,0 +1,12 @@
+export declare class RichTextInputLocalization {
+    get linkButton(): string;
+    get linkDialogTitle(): string;
+    get linkUrlLabel(): string;
+    get linkTextLabel(): string;
+    get linkTargetLabel(): string;
+    get linkTargetSelf(): string;
+    get linkTargetBlank(): string;
+    get linkCancelButton(): string;
+    get linkSaveButton(): string;
+    get linkUrlInvalid(): string;
+}

package/dist/ui/inputs/rich-text-input/rich-text-input-localization.js

@@ -0,0 +1,48 @@
+import { AppLocale } from '../../../core/locale';
+const loc = {
+    linkButton: { en: 'Insert/Edit Link', no: 'Sett inn/rediger lenke' },
+    linkDialogTitle: { en: 'Insert/Edit Link', no: 'Sett inn/rediger lenke' },
+    linkUrlLabel: { en: 'URL', no: 'URL' },
+    linkTextLabel: { en: 'Text to display', no: 'Tekst a vise' },
+    linkTargetLabel: { en: 'Open link in...', no: 'Apne lenke i...' },
+    linkTargetSelf: { en: 'Current window', no: 'Gjeldende vindu' },
+    linkTargetBlank: { en: 'New window', no: 'Nytt vindu' },
+    linkCancelButton: { en: 'Cancel', no: 'Avbryt' },
+    linkSaveButton: { en: 'Save', no: 'Lagre' },
+    linkUrlInvalid: {
+        en: 'The URL you entered is not valid. Please enter a valid URL.',
+        no: 'URLen du skrev inn er ikke gyldig. Vennligst skriv inn en gyldig URL.'
+    }
+};
+export class RichTextInputLocalization {
+    get linkButton() {
+        return loc.linkButton[AppLocale.current];
+    }
+    get linkDialogTitle() {
+        return loc.linkDialogTitle[AppLocale.current];
+    }
+    get linkUrlLabel() {
+        return loc.linkUrlLabel[AppLocale.current];
+    }
+    get linkTextLabel() {
+        return loc.linkTextLabel[AppLocale.current];
+    }
+    get linkTargetLabel() {
+        return loc.linkTargetLabel[AppLocale.current];
+    }
+    get linkTargetSelf() {
+        return loc.linkTargetSelf[AppLocale.current];
+    }
+    get linkTargetBlank() {
+        return loc.linkTargetBlank[AppLocale.current];
+    }
+    get linkCancelButton() {
+        return loc.linkCancelButton[AppLocale.current];
+    }
+    get linkSaveButton() {
+        return loc.linkSaveButton[AppLocale.current];
+    }
+    get linkUrlInvalid() {
+        return loc.linkUrlInvalid[AppLocale.current];
+    }
+}

package/dist/ui/inputs/rich-text-input/tinymce-input.svelte

@@ -0,0 +1,250 @@
+<script lang="ts">import { AppTheme } from '../../../core/theme';
+import { DomHelper, HtmlHelper, Utils } from '../../../core/utils';
+import { HtmlBlock } from '../../html-block';
+import { RichTextInputLocalization } from './rich-text-input-localization';
+import { addValidatedLinkButton } from './validated-link-button';
+import { onDestroy, onMount } from 'svelte';
+let { value, options = undefined, debounce = 0, placeholder = undefined, disabled = false, borderless = false, autofocus = 'false', modelEvents = 'change input undo redo', rows = 0, conf = undefined, on } = $props();
+const id = `ti-${crypto.randomUUID()}`;
+const fixedToolbarId = `fixed-toolbar-${id}`;
+let element;
+let editorRef = $state.raw(null);
+let everFocused = false;
+let lastVal = $state.raw(undefined);
+let tinymce;
+$effect(() => {
+    if (editorRef && lastVal !== value) {
+        setEditorValue(editorRef, value ?? '');
+    }
+});
+$effect(() => {
+    if (editorRef) {
+        editorRef.mode.set(disabled ? 'readonly' : 'design');
+    }
+});
+onMount(async () => {
+    const loc = new RichTextInputLocalization();
+    on?.mounted?.({
+        insertEmoji: (emoji) => {
+            if (!everFocused && editorRef) {
+                editorRef.selection.select(editorRef.getBody(), true);
+                editorRef.selection.collapse(false);
+            }
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    editorRef?.execCommand('mceInsertContent', false, emoji);
+                    resolve(true);
+                });
+            });
+        }
+    });
+    if (debounce) {
+        applyChange = Utils.debounce(applyChange, debounce);
+    }
+    const { default: tmi } = await import('tinymce');
+    await Promise.all([
+        import('tinymce/themes/silver'),
+        AppTheme.isDarkMode ? import('tinymce/skins/ui/oxide-dark/skin.min.css') : import('tinymce/skins/ui/oxide/skin.min.css'),
+        import('tinymce/skins/ui/oxide/content.inline.min.css'),
+        import('tinymce/icons/default'),
+        import('tinymce/plugins/link'),
+        import('tinymce/plugins/lists'),
+        import('tinymce/plugins/paste'),
+        import('tinymce/plugins/advlist'),
+        import('tinymce/plugins/table')
+    ]);
+    tinymce = tmi;
+    await tinymce.init({
+        target: element,
+        inline: true,
+        skin: false,
+        fixed_toolbar_container: `#${options?.fixedToolbarId || fixedToolbarId}`,
+        menubar: false,
+        auto_focus: autofocus,
+        placeholder: placeholder,
+        readonly: disabled,
+        toolbar: 'undo redo | formatselect | fontselect fontsizeselect | bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | lineheight | table | validatedlink',
+        toolbar_persist: options?.persistToolbar,
+        plugins: ['lists', 'paste', 'advlist', 'table'],
+        advlist_bullet_styles: 'default,circle,square,disc',
+        advlist_number_styles: 'default,lower-alpha,lower-roman,upper-alpha,upper-roman',
+        lineheight_formats: '1 1.15 1.5 2 2.5 3',
+        font_formats: 'Arial=arial,helvetica,sans-serif; Comic Sans MS=comic sans ms,cursive; Courier New=courier new,courier,monospace; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,charcoal,sans-serif; Lucida Console=lucida console,monaco,monospace; Palatino Linotype=palatino linotype,book antiqua,palatino,serif; Tahoma=tahoma,geneva,sans-serif; Times New Roman=times new roman,times,serif; Trebuchet MS=trebuchet ms,sans-serif; Verdana=verdana,geneva,sans-serif',
+        fontsize_formats: '8px 10px 12px 14px 16px 18px 24px 36px 48px',
+        block_formats: 'Paragraph=p; Heading 1=h1; Heading 2=h2; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6',
+        contextmenu: 'link',
+        paste_data_images: false,
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        paste_preprocess: (_, args) => {
+            if (!args.wordContent && !args.internal) {
+                const text = HtmlHelper.stripHtml(args.content);
+                const lines = text.split('\n');
+                args.content = '';
+                lines.forEach((line) => {
+                    if (!line) {
+                        line = '&nbsp;';
+                    }
+                    args.content += `<p>${line}</p>`;
+                });
+            }
+        },
+        ...conf,
+        setup: (editor) => {
+            editorRef = editor;
+            editor.on('init', () => {
+                if (rows) {
+                    editor.bodyElement.style.minHeight = DomHelper.calcHeightBasedOnRows(editor.bodyElement, rows);
+                }
+                editor.on(modelEvents, () => applyChange(editor));
+            });
+            editor.on('blur', () => {
+                HtmlHelper.clearSelection();
+                notifyFocused(false);
+            });
+            editor.on('focus', () => {
+                everFocused = true;
+                notifyFocused(true);
+            });
+            addValidatedLinkButton(editor, loc);
+            if (typeof conf?.setup === 'function') {
+                conf.setup(editor);
+            }
+        }
+    });
+});
+onDestroy(() => {
+    if (editorRef) {
+        tinymce.remove(editorRef);
+    }
+    editorRef = null;
+});
+const notifyFocused = (foc) => {
+    on?.focused?.(foc);
+};
+let applyChange = (editor) => {
+    lastVal = editor.getContent();
+    if (lastVal !== value) {
+        value = lastVal;
+    }
+    on?.change?.(lastVal);
+};
+const setEditorValue = (editor, val) => {
+    editor.setContent(val);
+    lastVal = val;
+};
+</script>
+
+<div class="tinymce-input" class:tinymce-input--disabled={disabled} class:tinymce-input--borderless={borderless}>
+  <span class="tinymce-input__toolbar" id={fixedToolbarId}></span>
+  <HtmlBlock>
+    <div class="tinymce-input__input" id={id} bind:this={element}></div>
+  </HtmlBlock>
+</div>
+
+<style>.tinymce-input {
+  --_tinymce-input--padding--block: var(--sc-kit--rich-text-input--padding--block, 0.5em);
+  --_tinymce-input--placeholder--color: var(--sc-kit--rich-text-input--placeholder--color, var(--_input--border-color));
+  --_--input--root--font-size: var(--sc-kit--rich-text-input--root--font-size);
+  --_--input--width: var(--sc-kit--rich-text-input--width);
+  --_--input--background: var(--sc-kit--rich-text-input--background);
+  --_--input--background--disabled: var(--sc-kit--rich-text-input--background--disabled);
+  --_--input--border-color: var(--sc-kit--rich-text-input--border-color);
+  --_--input--border-radius: var(--sc-kit--rich-text-input--border-radius);
+  --_--input--text--font-size: var(--sc-kit--rich-text-input--text--font-size);
+  --_--input--text--color: var(--sc-kit--rich-text-input--text--color);
+  --_--input--placeholder--color: var(--_tinymce-input--placeholder--color);
+  --_--input--accent-color: var(--sc-kit--rich-text-input--accent-color);
+  --_--input--padding--inline: var(--sc-kit--rich-text-input--padding--inline);
+  --_--input--padding--block: var(--_tinymce-input--padding--block);
+  --_input--root--font-size: var(--_--input--root--font-size, 1rem);
+  --_input--height: var(--_--input--height, 2em);
+  --_input--width: var(--_--input--width, 100%);
+  --_input--background: var(--_--input--background, light-dark(#ffffff, #1c1c1c));
+  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#f9fafb, #1f2937));
+  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
+  --_input--border-radius: var(--_--input--border-radius, 0.25em);
+  --_input--icon--size: var(--_--input--icon--size, 1em);
+  --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
+  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
+  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
+  --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
+  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
+  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
+  --_input--padding--block: var(--_--input--padding--block, 0);
+  --_input--padding-top: var(--_--input--padding-top, var(--_input--padding--block));
+  --_input--padding-right: var(--_--input--padding-right, var(--_input--padding--inline));
+  --_input--padding-bottom: var(--_--input--padding-bottom, var(--_input--padding--block));
+  --_input--padding-left: var(--_--input--padding-left, var(--_input--padding--inline));
+  font-size: var(--_input--root--font-size);
+  height: var(--_input--height);
+  color: var(--_input--text--color);
+  border: 1px solid var(--_input--border-color);
+  border-radius: var(--_input--border-radius);
+  width: var(--_input--width);
+  min-width: var(--_input--width);
+  background: var(--_input--background);
+  padding-top: var(--_input--padding-top);
+  padding-right: var(--_input--padding-right);
+  padding-bottom: var(--_input--padding-bottom);
+  padding-left: var(--_input--padding-left);
+  --_input--default-shadow-color: transparent;
+  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
+  position: relative;
+  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
+  transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.tinymce-input:focus, .tinymce-input:focus-within {
+  --_input--default-shadow-color: var(--_input--accent-color);
+}
+.tinymce-input--disabled {
+  background-color: var(--_input--background--disabled);
+  cursor: default;
+}
+.tinymce-input {
+  cursor: text;
+  min-height: 2em;
+  height: auto;
+  display: block;
+  position: relative;
+}
+.tinymce-input--borderless {
+  --_input--border-color: transparent;
+  --_input--background: transparent;
+  --_input--background--disabled: transparent;
+  --_input--accent-color: transparent;
+  --_input--explicit-shadow-color: transparent;
+  --_input--height: auto;
+}
+.tinymce-input :global(.tox-tinymce-inline .tox-editor-header) {
+  border-radius: 0.375em !important;
+  overflow: hidden;
+}
+.tinymce-input__input {
+  font-size: var(--_input--text--font-size);
+  color: var(--_input--text--color);
+}
+.tinymce-input__input::placeholder {
+  color: var(--_input--placeholder--color);
+}
+.tinymce-input__input:-webkit-autofill {
+  -webkit-text-fill-color: var(--_input--text--color) !important;
+}
+.tinymce-input__input {
+  min-height: 100%;
+  background: transparent;
+}
+.tinymce-input__input::before {
+  color: var(--_tinymce-input--placeholder--color) !important;
+}
+.tinymce-input__input:focus {
+  outline: none;
+}
+.tinymce-input__toolbar {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+}
+
+:global(.tox .tox-collection__item-label) {
+  white-space: nowrap;
+}</style>

package/dist/ui/inputs/rich-text-input/tinymce-input.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { RichTextInputOptions } from './types';
+import type { RawEditorSettings } from 'tinymce';
+type Props = {
+    value: string | null | undefined;
+    options?: RichTextInputOptions;
+    debounce?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Remove border, background, and accent shadow */
+    borderless?: boolean;
+    autofocus?: true | string;
+    modelEvents?: string;
+    rows?: number;
+    conf?: RawEditorSettings;
+    on: {
+        change: (value: string) => void;
+        focused?: (focused: boolean) => void;
+        mounted?: (data: {
+            insertEmoji: (emoji: string) => void;
+        }) => void;
+    };
+};
+declare const TinymceInput: import("svelte").Component<Props, {}, "">;
+type TinymceInput = ReturnType<typeof TinymceInput>;
+export default TinymceInput;

package/dist/ui/inputs/rich-text-input/tinymce.declarations.d.ts

@@ -0,0 +1,7 @@
+declare module 'tinymce/themes/silver';
+declare module 'tinymce/icons/default';
+declare module 'tinymce/plugins/link';
+declare module 'tinymce/plugins/lists';
+declare module 'tinymce/plugins/paste';
+declare module 'tinymce/plugins/advlist';
+declare module 'tinymce/plugins/table';

package/dist/ui/inputs/rich-text-input/types.d.ts

@@ -0,0 +1,4 @@
+export type RichTextInputOptions = {
+    persistToolbar?: boolean;
+    fixedToolbarId?: string;
+};

package/dist/ui/inputs/rich-text-input/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/inputs/rich-text-input/validated-link-button.d.ts

@@ -0,0 +1,3 @@
+import type { RichTextInputLocalization } from './rich-text-input-localization';
+import type { Editor } from 'tinymce';
+export declare const addValidatedLinkButton: (editor: Editor, loc: RichTextInputLocalization) => void;

package/dist/ui/inputs/rich-text-input/validated-link-button.js

@@ -0,0 +1,78 @@
+import { validateHref } from '../../../core/utils';
+const DEFAULT_TARGET = '_blank';
+export const addValidatedLinkButton = (editor, loc) => {
+    editor.ui.registry.addButton('validatedlink', {
+        icon: 'link',
+        tooltip: loc.linkButton,
+        onAction: () => {
+            const linkNode = editor.dom.getParent(editor.selection.getNode(), 'a');
+            let initialUrl = '';
+            let initialText = '';
+            let initialTarget = DEFAULT_TARGET;
+            if (linkNode) {
+                initialUrl = linkNode.getAttribute('href') ?? '';
+                initialText = linkNode.textContent ?? '';
+                initialTarget = linkNode.getAttribute('target') ?? DEFAULT_TARGET;
+            }
+            else {
+                initialText = editor.selection.getContent({ format: 'text' }) ?? '';
+            }
+            let userChangedText = false;
+            editor.windowManager.open({
+                title: loc.linkDialogTitle,
+                body: {
+                    type: 'panel',
+                    items: [
+                        { type: 'input', name: 'url', label: loc.linkUrlLabel },
+                        { type: 'input', name: 'text', label: loc.linkTextLabel },
+                        {
+                            type: 'listbox',
+                            name: 'openIn',
+                            label: loc.linkTargetLabel,
+                            items: [
+                                { text: loc.linkTargetSelf, value: '_self' },
+                                { text: loc.linkTargetBlank, value: '_blank' }
+                            ]
+                        }
+                    ]
+                },
+                initialData: {
+                    url: initialUrl,
+                    text: initialText,
+                    openIn: initialTarget
+                },
+                buttons: [
+                    { type: 'cancel', text: loc.linkCancelButton },
+                    { type: 'submit', text: loc.linkSaveButton, primary: true }
+                ],
+                onChange: (api, details) => {
+                    if (details.name === 'text' && !userChangedText) {
+                        userChangedText = true;
+                    }
+                    if (details.name === 'url') {
+                        const data = api.getData();
+                        if (!userChangedText && !initialText) {
+                            api.setData({ text: data.url });
+                        }
+                    }
+                },
+                onSubmit: (api) => {
+                    const data = api.getData();
+                    if (!validateHref(data.url, { allowRelative: 'prefixed' }).valid) {
+                        editor.windowManager.alert(loc.linkUrlInvalid);
+                        return;
+                    }
+                    if (linkNode) {
+                        editor.dom.setAttrib(linkNode, 'href', data.url);
+                        editor.dom.setAttrib(linkNode, 'target', data.openIn);
+                        linkNode.textContent = data.text ?? data.url;
+                    }
+                    else {
+                        editor.insertContent(`<a href="${data.url}" target="${data.openIn}">${data.text ?? data.url}</a>`);
+                    }
+                    api.close();
+                }
+            });
+        }
+    });
+};