Editor component initial commit

docs/src/pages/components/Editor.svx

@@ -0,0 +1,42 @@
+---
+components: ["Editor", "EditorSkeleton"]
+---
+
+<script>
+  import { Editor, EditorSkeleton, InlineNotification } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+`Editor` is keyed for performance reasons.
+
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01"><code>html</code> attribute contains pure html.</div>
+</InlineNotification>
+
+### Default
+
+<Editor titleText="Document" html="<p>Hello</p>" />
+
+### Extra-large size
+
+<Editor titleText="Document" html="<p>Hello</p>" />
+
+### Small size
+
+<Editor titleText="Document" html="<p>Hello</p>" />
+
+### Invalid state
+
+<Editor invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Document" html="<p>Hello</p>" />
+
+### Warning state
+
+<Editor warn warnText="This contact method is not associated with your account" titleText="Document" html="<p>Hello</p>" />
+
+### Disabled state
+
+<Editor disabled titleText="Document" html="<p>Hello</p>" />
+
+### Skeleton
+
+<EditorSkeleton />

src/Editor/Editor.svelte

@@ -0,0 +1,114 @@
+<script>
+  /**
+   */
+
+  /**
+   * Specify the size of the dropdown field
+   * @type {"sm" | "lg" | "xl"}
+   */
+  //export let size = undefined;
+
+  /** Set to `true` to disable the dropdown */
+  export let disabled = false;
+
+  /** Specify the title text */
+  export let titleText = "";
+
+  /** Set to `true` to indicate an invalid state */
+  export let invalid = false;
+
+  /** Specify the invalid state text */
+  export let invalidText = "";
+
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
+  /** Specify the helper text */
+  export let helperText = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /** Set an id for the list box component */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Specify the placeholder text */
+  export let placeholder = null;
+
+  /** Specify the html
+   * @type {string}
+   */
+  export let html = undefined;
+
+  /** Specify the text
+   * @type {string}
+   */
+  export let text = undefined;
+
+  import { quill } from "./quill";
+
+  console.log(invalidText);
+
+  let toolbar = [
+    [{ header: 1 }, { header: 2 }, "blockquote", "link", "image", "video"],
+    ["bold", "italic", "underline", "strike"],
+    [{ list: "ordered" }, { list: "ordered" }],
+    [{ align: [] }],
+    ["clean"],
+  ];
+
+  export let options = {
+    modules: {
+      toolbar,
+    },
+    theme: "snow",
+    placeholder,
+  };
+
+  const onTextChange = (event) => {
+    html = event.detail.html;
+    text = event.detail.text;
+  };
+</script>
+
+{#if titleText}
+  <label
+    for="{id}"
+    class:bx--label="{true}"
+    class:bx--label--disabled="{disabled}"
+    class:bx--visually-hidden="{hideLabel}"
+  >
+    {titleText}
+  </label>
+{/if}
+{#if disabled}
+  {@html html}
+{:else}
+  <div use:quill="{{ options, html }}" on:text-change="{onTextChange}"></div>
+{/if}
+{#if invalid}
+  <div class:bx--form-requirement="{true}">{invalidText}</div>
+{/if}
+{#if !invalid && warn}
+  <div class:bx--form-requirement="{true}">{warnText}</div>
+{/if}
+{#if !invalid && !warn && helperText}
+  <div
+    class:bx--form__helper-text="{true}"
+    class:bx--form__helper-text--disabled="{disabled}"
+  >
+    {helperText}
+  </div>
+{/if}
+<div class:bx--form-requirement="{true}">{invalidText}</div>
+
+<style>
+  @import "https://cdn.quilljs.com/1.3.6/quill.snow.css";
+
+  .ql-container--invalid {
+    border: 2px solid red;
+  }
+</style>

src/Editor/EditorSkeleton.svelte

@@ -0,0 +1,19 @@
+<script>
+  /** Set to `true` to hide the label text */
+  export let hideLabel = false;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<div
+  class:bx--form-item="{true}"
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  {#if !hideLabel}
+    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+  {/if}
+  <div class:bx--skeleton="{true}" class:bx--text-input="{true}"></div>
+</div>

src/Editor/index.js

@@ -0,0 +1,3 @@
+export { default as Editor } from "./Editor.svelte";
+export { default as EditorSkeleton } from "./EditorSkeleton.svelte";
+export { quill } from "./quill";

src/Editor/quill.js

@@ -0,0 +1,32 @@
+// https://github.com/lagden/svelte-editor-quill
+
+import Quill from "quill";
+
+export function quill(node, params) {
+  const quill = new Quill(node, {
+    ...params.options,
+  });
+
+  if (params.html) {
+    const delta = quill.clipboard.convert(params.html);
+    quill.setContents(delta, "silent");
+  }
+
+  const onTextChange = () => {
+    const customEvent = new CustomEvent("text-change", {
+      detail: {
+        html: quill.root.innerHTML,
+        text: quill.getText(),
+      },
+    });
+    node.dispatchEvent(customEvent);
+  };
+
+  quill.on("text-change", onTextChange);
+
+  return {
+    destroy() {
+      quill.off("text-change", onTextChange);
+    },
+  };
+}

types/Editor/Editor.svelte.d.ts

@@ -0,0 +1,83 @@
+/// <reference types="svelte" />
+import type { SvelteComponentTyped } from "svelte";
+
+export interface EditorProps {
+  /**
+   * Set to `true` to disable the dropdown
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the title text
+   * @default ""
+   */
+  titleText?: string;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the invalid state text
+   * @default ""
+   */
+  invalidText?: string;
+
+  /**
+   * Set to `true` to indicate an warning state
+   * @default false
+   */
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
+
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Set an id for the list box component
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify the placeholder text
+   * @default null
+   */
+  placeholder?: undefined;
+
+  /**
+   * Specify the html
+   * @default undefined
+   */
+  html?: string;
+
+  /**
+   * Specify the text
+   * @default undefined
+   */
+  text?: string;
+
+  /**
+   * @default { modules: { toolbar }, theme: 'snow', placeholder }
+   */
+  options?: { modules: { toolbar }; theme: "snow"; placeholder };
+}
+
+export default class Editor extends SvelteComponentTyped<EditorProps, {}, {}> {}

types/Editor/EditorSkeleton.svelte.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="svelte" />
+import type { SvelteComponentTyped } from "svelte";
+
+export interface EditorSkeletonProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+}
+
+export default class EditorSkeleton extends SvelteComponentTyped<
+  EditorSkeletonProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  {}
+> {}