@sveltia/ui 0.11.1 → 0.12.1

package/package/typedef.d.ts

@@ -1,2 +1,50 @@
 type PopupPosition = ('top-left' | 'top-right' | 'right-top' | 'right-bottom' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom');
 type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+type TextEditorBlockType = 'paragraph' | 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' | 'heading-6' | 'bulleted-list' | 'numbered-list' | 'blockquote';
+type TextEditorFormatType = 'bold' | 'italic' | 'code';
+type TextEditorInlineType = TextEditorFormatType | 'link';
+type TextEditorMode = 'rich-text' | 'plain-text';
+type TextEditorState = {
+    /**
+     * - Lexical
+     * editor instance.
+     */
+    editor: import('svelte/store').Writable<import('lexical').LexicalEditor>;
+    /**
+     * - Random ID assigned to the editor.
+     */
+    editorId: import('svelte/store').Writable<string>;
+    /**
+     * - Block level
+     * type of the current selection.
+     */
+    selectionBlockType: import('svelte/store').Writable<TextEditorBlockType>;
+    /**
+     * - Inline
+     * level types of the current selection.
+     */
+    selectionInlineTypes: import('svelte/store').Writable<TextEditorInlineType[]>;
+    /**
+     * - Enabled modes.
+     */
+    modes: TextEditorMode[];
+    /**
+     * - Whether to use rich text mode.
+     * If `false`, the editor shows the plain text editor.
+     */
+    useRichText: import('svelte/store').Writable<boolean>;
+    /**
+     * - `true` if there was an
+     * error while converting Markdown to Lexical nodes.
+     */
+    hasConverterError: import('svelte/store').Writable<boolean>;
+    /**
+     * - Enabled buttons for
+     * the editor.
+     */
+    enabledButtons: (TextEditorBlockType | TextEditorInlineType)[];
+    /**
+     * Function to trigger the Lexical converter.
+     */
+    convertMarkdown: Function;
+};

package/package/typedef.js

@@ -7,3 +7,39 @@
  * @typedef {'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' |
  * 'bottom-right'} ToastPosition
  */
+
+/**
+ * @typedef {'paragraph' | 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' |
+ * 'heading-6' | 'bulleted-list' | 'numbered-list' | 'blockquote'} TextEditorBlockType
+ */
+
+/**
+ * @typedef {'bold' | 'italic' | 'code'} TextEditorFormatType
+ */
+
+/**
+ * @typedef {TextEditorFormatType | 'link'} TextEditorInlineType
+ */
+
+/**
+ * @typedef {'rich-text' | 'plain-text'} TextEditorMode
+ */
+
+/**
+ * @typedef {object} TextEditorState
+ * @property {import('svelte/store').Writable<import('lexical').LexicalEditor>} editor - Lexical
+ * editor instance.
+ * @property {import('svelte/store').Writable<string>} editorId - Random ID assigned to the editor.
+ * @property {import('svelte/store').Writable<TextEditorBlockType>} selectionBlockType - Block level
+ * type of the current selection.
+ * @property {import('svelte/store').Writable<TextEditorInlineType[]>} selectionInlineTypes - Inline
+ * level types of the current selection.
+ * @property {TextEditorMode[]} modes - Enabled modes.
+ * @property {import('svelte/store').Writable<boolean>} useRichText - Whether to use rich text mode.
+ * If `false`, the editor shows the plain text editor.
+ * @property {import('svelte/store').Writable<boolean>} hasConverterError - `true` if there was an
+ * error while converting Markdown to Lexical nodes.
+ * @property {(TextEditorBlockType | TextEditorInlineType)[]} enabledButtons - Enabled buttons for
+ * the editor.
+ * @property {Function} convertMarkdown Function to trigger the Lexical converter.
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,12 +23,23 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "svelte": "^4.2.14"
+    "@lexical/code": "^0.14.5",
+    "@lexical/history": "^0.14.5",
+    "@lexical/link": "^0.14.5",
+    "@lexical/list": "^0.14.5",
+    "@lexical/markdown": "^0.14.5",
+    "@lexical/rich-text": "^0.14.5",
+    "@lexical/selection": "^0.14.5",
+    "@lexical/table": "^0.14.5",
+    "@lexical/utils": "^0.14.5",
+    "@sveltia/utils": "^0.1.0",
+    "lexical": "^0.14.5",
+    "svelte": "^4.2.15"
   },
   "devDependencies": {
     "@playwright/test": "^1.43.1",
     "@sveltejs/adapter-auto": "^3.2.0",
-    "@sveltejs/kit": "^2.5.5",
+    "@sveltejs/kit": "^2.5.7",
     "@sveltejs/package": "^2.3.1",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "cspell": "^8.7.0",
@@ -49,9 +60,9 @@
     "stylelint-scss": "^6.2.1",
     "svelte-check": "^3.6.9",
     "svelte-i18n": "^4.0.0",
-    "svelte-preprocess": "^5.1.3",
+    "svelte-preprocess": "^5.1.4",
     "tslib": "^2.6.2",
-    "vite": "^5.2.8",
+    "vite": "^5.2.10",
     "vitest": "^1.5.0"
   },
   "exports": {
@@ -326,10 +337,10 @@
       "svelte": "./package/components/tabs/tab.svelte",
       "default": "./package/components/tabs/tab.svelte"
     },
-    "./components/text-field/markdown-editor.svelte": {
-      "types": "./package/components/text-field/markdown-editor.svelte.d.ts",
-      "svelte": "./package/components/text-field/markdown-editor.svelte",
-      "default": "./package/components/text-field/markdown-editor.svelte"
+    "./components/text-editor/text-editor.svelte": {
+      "types": "./package/components/text-editor/text-editor.svelte.d.ts",
+      "svelte": "./package/components/text-editor/text-editor.svelte",
+      "default": "./package/components/text-editor/text-editor.svelte"
     },
     "./components/text-field/number-input.svelte": {
       "types": "./package/components/text-field/number-input.svelte.d.ts",
@@ -416,10 +427,6 @@
       "types": "./package/services/popup.d.ts",
       "default": "./package/services/popup.js"
     },
-    "./services/util": {
-      "types": "./package/services/util.d.ts",
-      "default": "./package/services/util.js"
-    },
     "./styles/core.scss": "./package/styles/core.scss",
     "./styles/variables.scss": "./package/styles/variables.scss",
     "./typedef": {
@@ -595,8 +602,8 @@
       "components/tabs/tab.svelte": [
         "./package/components/tabs/tab.svelte.d.ts"
       ],
-      "components/text-field/markdown-editor.svelte": [
-        "./package/components/text-field/markdown-editor.svelte.d.ts"
+      "components/text-editor/text-editor.svelte": [
+        "./package/components/text-editor/text-editor.svelte.d.ts"
       ],
       "components/text-field/number-input.svelte": [
         "./package/components/text-field/number-input.svelte.d.ts"
@@ -652,9 +659,6 @@
       "services/popup": [
         "./package/services/popup.d.ts"
       ],
-      "services/util": [
-        "./package/services/util.d.ts"
-      ],
       "typedef": [
         "./package/typedef.d.ts"
       ]

package/package/components/text-field/markdown-editor.svelte

@@ -1,141 +0,0 @@
-<!--
-  @component
-  A Markdown text editor.
--->
-<script>
-  import { _ } from 'svelte-i18n';
-  import { getRandomId } from '../../services/util';
-  import Button from '../button/button.svelte';
-  import Divider from '../divider/divider.svelte';
-  import Icon from '../icon/icon.svelte';
-  import Toolbar from '../toolbar/toolbar.svelte';
-  import TextArea from './text-area.svelte';
-
-  /**
-   * Make the text input container flexible.
-   * @type {boolean}
-   */
-  export let flex = false;
-  /**
-   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
-   * @type {boolean | undefined}
-   */
-  export let hidden = undefined;
-  /**
-   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
-   * @type {boolean}
-   */
-  export let disabled = false;
-  /**
-   * Whether to disable the widget. An alias of `aria-readonly` attribute.
-   * @type {boolean}
-   */
-  export let readonly = false;
-  /**
-   * Whether to mark the widget required. An alias of the `aria-required` attribute.
-   * @type {boolean}
-   */
-  export let required = false;
-  /**
-   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
-   * @type {boolean}
-   */
-  export let invalid = false;
-  /**
-   * Input value.
-   * @type {string | undefined}
-   */
-  export let value = undefined;
-
-  const id = getRandomId('editor');
-
-  const defaultButtons = [
-    { name: 'bold', label: $_('_sui.markdown_editor.bold'), icon: 'format_bold' },
-    { name: 'italic', label: $_('_sui.markdown_editor.italic'), icon: 'format_italic' },
-    { name: 'code', label: $_('_sui.markdown_editor.code'), icon: 'code' },
-    { name: 'link', label: $_('_sui.markdown_editor.link'), icon: 'link' },
-    { separator: true },
-    {
-      name: 'heading-one',
-      label: $_('_sui.markdown_editor.heading_x', { values: { level: 1 } }),
-      icon: 'format_h1',
-    },
-    {
-      name: 'heading-two',
-      label: $_('_sui.markdown_editor.heading_x', { values: { level: 2 } }),
-      icon: 'format_h2',
-    },
-    { name: 'quote', label: $_('_sui.markdown_editor.quote'), icon: 'format_quote' },
-    { separator: true },
-    {
-      name: 'bulleted-list',
-      label: $_('_sui.markdown_editor.bulleted_list'),
-      icon: 'format_list_bulleted',
-    },
-    {
-      name: 'numbered-list',
-      label: $_('_sui.markdown_editor.numbered_list'),
-      icon: 'format_list_numbered',
-    },
-  ];
-</script>
-
-<div role="none" class="wrapper" hidden={hidden || undefined} {...$$restProps}>
-  <div role="none" class="inner">
-    <Toolbar
-      disabled={disabled || readonly}
-      aria-label={$_('_sui.markdown_editor.markdown_editor')}
-    >
-      {#each defaultButtons as { label, icon, separator }}
-        {#if separator}
-          <Divider />
-        {:else}
-          <Button iconic aria-label={label} aria-controls={id}>
-            <Icon slot="start-icon" name={icon} />
-          </Button>
-        {/if}
-      {/each}
-    </Toolbar>
-    <TextArea
-      {id}
-      autoResize={true}
-      bind:value
-      {flex}
-      {hidden}
-      {disabled}
-      {readonly}
-      {required}
-      {invalid}
-    />
-  </div>
-</div>
-
-<style>.wrapper {
-  margin: var(--sui-focus-ring-width);
-  width: calc(100% - var(--sui-focus-ring-width) * 2);
-}
-.wrapper :global([role="toolbar"]) {
-  display: flex;
-  gap: 0;
-  border-radius: 4px 4px 0 0;
-  padding: 8px;
-  background-color: var(--sui-tertiary-background-color);
-}
-.wrapper :global([role="toolbar"]) :global(button) {
-  flex: none;
-  margin: 0 !important;
-}
-.wrapper :global([role="toolbar"]) + :global(div) {
-  width: 100%;
-}
-.wrapper :global([role="toolbar"]) + :global(div) :global(textarea) {
-  border-radius: 0 0 4px 4px !important;
-}
-
-.inner {
-  display: contents;
-}
-.inner :global(.text-area) {
-  margin: 0 !important;
-  width: 100% !important;
-}</style>

package/package/services/util.d.ts

@@ -1,3 +0,0 @@
-export function getRandomId(prefix?: string | undefined, length?: number | undefined): string;
-export function isObject(input: any): boolean;
-export function sleep(ms?: number | undefined): Promise<void>;

package/package/services/util.js

@@ -1,35 +0,0 @@
-/**
- * Get a random ID that can be used for elements.
- * @param {string} [prefix] - Prefix to be added to the ID, e.g. `popup`.
- * @param {number} [length] - Number of characters to be used in the ID.
- * @returns {string} Generated ID.
- */
-export const getRandomId = (prefix = 'e', length = 7) =>
-  [
-    prefix,
-    new Array(length)
-      .fill(0)
-      .map(() => '0123456789abcdef'[Math.floor(Math.random() * 12)])
-      .join(''),
-  ].join('-');
-
-/**
- * Check if the given input is a simple object.
- * @param {*} input - Input, probably an object.
- * @returns {boolean} Result.
- */
-export const isObject = (input) =>
-  input !== null && typeof input === 'object' && !Array.isArray(input);
-
-/**
- * Return a simple `Promise` to resolve in the given time, making it easier to wait for a bit in the
- * code, particularly while making sequential HTTP requests.
- * @param {number} [ms] - Milliseconds to wait.
- * @returns {Promise<void>} Nothing.
- */
-export const sleep = (ms = 1000) =>
-  new Promise((resolve) => {
-    window.setTimeout(() => {
-      resolve();
-    }, ms);
-  });