@sveltia/ui 0.11.0 → 0.12.0

package/package/styles/variables.scss

@@ -101,6 +101,7 @@
   --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
   --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
   --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
+  --sui-code-background-color: hsl(var(--sui-background-color-4-hsl));
   --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
   --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
   --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
@@ -160,10 +161,11 @@
   --sui-font-weight-normal: 300;
   --sui-font-weight-bold: 600;
   --sui-font-family-monospace: "Noto Sans Mono", monospace;
-  --sui-font-size-monospace: 12.5px;
+  --sui-font-size-monospace: 0.9em;
   --sui-line-height-default: 1.25;
   --sui-line-height-compact: 1.5;
   --sui-line-height-comfortable: 1.75;
+  --sui-word-spacing-normal: 0.1ex;
   // Controls
   --sui-control-small-border-width: 1px;
   --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);

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.0",
+  "version": "0.12.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,36 +23,46 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "svelte": "^4.2.12"
+    "@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",
+    "lexical": "^0.14.5",
+    "svelte": "^4.2.14"
   },
   "devDependencies": {
-    "@playwright/test": "^1.43.0",
+    "@playwright/test": "^1.43.1",
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/kit": "^2.5.5",
     "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "cspell": "^8.6.1",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "cspell": "^8.7.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsdoc": "^48.2.3",
-    "eslint-plugin-svelte": "^2.35.1",
+    "eslint-plugin-svelte": "^2.37.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-html": "^1.6.0",
     "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
-    "sass": "^1.74.1",
+    "prettier-plugin-svelte": "^3.2.3",
+    "sass": "^1.75.0",
     "stylelint": "^16.3.1",
     "stylelint-config-recommended-scss": "^14.0.0",
     "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",
-    "vitest": "^1.4.0"
+    "vitest": "^1.5.0"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -326,10 +336,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",
@@ -595,8 +605,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"

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>