drab 4.1.6 → 5.0.0-beta.0

package/dist/components/Editor.svelte

@@ -1,404 +0,0 @@
-<!--
-@component
-
-### Editor
-
-`textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, the `valueTextarea` is just a `string`, so you can easily store it in a database or manipulate it without learning a separate API. 
-
-- This component is used to create [Typo](https://typo.robino.dev)
-
-@props
-
-- `classButton` - `class` of all the `button` elements
-- `classControls` - `class` of the `div` that wraps the controls
-- `classTextarea` - `class` of the `textarea` element
-- `contentElements` - an array of `EditorContentElement`s for the controls
-- `idControls` - `id` of the `div` that wraps the controls
-- `idTextarea` - `id` of the `textarea` element
-- `keyPairs` - keys that will auto-close if typed, value is their closing character
-- `nameTextarea` - `name` of the `textarea` element
-- `placeholderTextarea` - `placeholder` of the `textarea` element
-- `selectionStartTextarea` - `selectionStart` value of the `textarea`
-- `spellcheckTextarea` - `spellcheck` of the `textarea` element
-- `valueTextarea` - `value` of the `textarea` element
-
-@Events
-
-| name    | event                   |
-| ------- | ----------------------- |
-| `input` | forward from `textarea` |
-
-@example
-
-```svelte
-<script lang="ts">
-	import { Editor } from "drab";
-</script>
-
-<Editor
-	classButton="button button-primary"
-	classControls="flex gap-2"
-	classTextarea="input h-36 mb-2"
-	placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
-	contentElements={[
-		{
-			title: "Bullet",
-			text: "- ",
-			display: "block",
-			icon: "Bullet",
-		},
-		{
-			title: "Italic",
-			text: "*",
-			display: "wrap",
-			icon: "Italic",
-			key: "i",
-			class: "italic",
-		},
-		{
-			title: "Anchor",
-			text: "[text](href)",
-			display: "inline",
-			icon: "Anchor",
-			key: "[",
-		},
-	]}
-/>
-```
--->
-
-<script>import { onMount } from "svelte";
-export let contentElements = [];
-export let valueTextarea = "";
-export let placeholderTextarea = "";
-export let spellcheckTextarea = true;
-export let classTextarea = "";
-export let idTextarea = "";
-export let nameTextarea = "";
-export let classButton = "";
-export let classControls = "";
-export let idControls = "";
-export let selectionStartTextarea = 0;
-export let keyPairs = {
-  "(": ")",
-  "{": "}",
-  "[": "]",
-  "<": ">",
-  '"': '"',
-  "`": "`"
-};
-let clientJs = false;
-let textArea;
-contentElements.forEach((el) => {
-  if (el.display === "wrap")
-    keyPairs[el.text] = el.text;
-});
-let openChars = [];
-const insertChar = (str, char, index) => {
-  return str.slice(0, index) + char + str.slice(index);
-};
-const removeChar = (str, index) => {
-  return str.slice(0, index) + str.slice(index + 1);
-};
-const insertText = async (el, selectionStart, selectionEnd) => {
-  if (el.display === "inline") {
-    valueTextarea = `${valueTextarea.slice(0, selectionEnd)}${el.text}${valueTextarea.slice(selectionEnd)}`;
-  } else if (el.display === "wrap") {
-    valueTextarea = insertChar(valueTextarea, el.text, selectionStart);
-    valueTextarea = insertChar(
-      valueTextarea,
-      keyPairs[el.text],
-      selectionEnd + el.text.length
-    );
-    if (el.text.length < 2)
-      openChars.push(el.text);
-  } else if (el.display === "block") {
-    const { lines, lineNumber } = getLineInfo();
-    if (lines[lineNumber].startsWith(el.text[0])) {
-      lines[lineNumber] = el.text.trim() + lines[lineNumber];
-    } else {
-      lines[lineNumber] = el.text + lines[lineNumber];
-    }
-    valueTextarea = lines.join("\n");
-  }
-};
-const setCaretPosition = async (text, selectionStart, selectionEnd) => {
-  let startPos = 0;
-  let endPos = 0;
-  if (/[a-z]/i.test(text)) {
-    for (let i = selectionEnd; i < valueTextarea.length; i++) {
-      if (valueTextarea[i].match(/[a-z]/i)) {
-        if (!startPos) {
-          startPos = i;
-        } else {
-          endPos = i + 1;
-        }
-      } else if (startPos) {
-        break;
-      }
-    }
-  } else {
-    startPos = selectionStart + text.length;
-    endPos = selectionEnd + text.length;
-  }
-  textArea.setSelectionRange(startPos, endPos);
-  textArea.focus();
-};
-const addContent = async (el) => {
-  const selectionEnd = textArea.selectionEnd;
-  const selectionStart = textArea.selectionStart;
-  await insertText(el, selectionStart, selectionEnd);
-  setCaretPosition(el.text, selectionStart, selectionEnd);
-};
-const onKeyDown = async (e) => {
-  const resetKeys = ["ArrowUp", "ArrowDown", "Delete"];
-  const nextChar = valueTextarea[textArea.selectionEnd];
-  if (resetKeys.includes(e.key)) {
-    openChars = [];
-  } else if (e.key === "Backspace") {
-    const prevChar = valueTextarea[textArea.selectionStart - 1];
-    if (prevChar in keyPairs && nextChar === keyPairs[prevChar]) {
-      e.preventDefault();
-      const start = textArea.selectionStart - 1;
-      const end = textArea.selectionEnd - 1;
-      valueTextarea = removeChar(valueTextarea, start);
-      valueTextarea = removeChar(valueTextarea, end);
-      setTimeout(() => {
-        textArea.setSelectionRange(start, end);
-      }, 0);
-      openChars.pop();
-    }
-    if (prevChar === "\n" && textArea.selectionStart === textArea.selectionEnd) {
-      e.preventDefault();
-      const newPos = textArea.selectionStart - 1;
-      const { lineNumber } = getLineInfo();
-      correctFollowing(lineNumber, true);
-      valueTextarea = removeChar(valueTextarea, newPos);
-      setTimeout(async () => {
-        textArea.setSelectionRange(newPos, newPos);
-      }, 0);
-    }
-  } else if (e.key === "Tab") {
-    if (getCurrentBlock() % 2 !== 0) {
-      e.preventDefault();
-      await addContent({
-        display: "inline",
-        text: "	",
-        icon: "tab",
-        title: "tab"
-      });
-    }
-  } else if (e.key === "Enter") {
-    const { lines, lineNumber, columnNumber } = getLineInfo();
-    const currentLine = lines[lineNumber];
-    let repeat = getRepeat(currentLine);
-    const original = repeat;
-    const num = startsWithNumberAndPeriod(repeat);
-    if (num)
-      repeat = `${num + 1}. `;
-    if (repeat && original.length < columnNumber) {
-      e.preventDefault();
-      if (num)
-        correctFollowing(lineNumber);
-      await addContent({
-        display: "inline",
-        text: `
-${repeat}`,
-        icon: "",
-        title: ""
-      });
-    } else if (repeat && original.length === columnNumber) {
-      e.preventDefault();
-      const selectionEnd = textArea.selectionEnd;
-      const newPos = selectionEnd - original.length;
-      for (let i = 0; i < original.length; i++) {
-        valueTextarea = removeChar(
-          valueTextarea,
-          textArea.selectionEnd - (i + 1)
-        );
-      }
-      setTimeout(async () => {
-        textArea.setSelectionRange(newPos, newPos);
-        textArea.focus();
-        await addContent({
-          display: "inline",
-          text: `
-`,
-          icon: "",
-          title: ""
-        });
-      }, 0);
-    }
-  } else {
-    const nextCharIsClosing = Object.values(keyPairs).includes(nextChar);
-    const highlighted = textArea.selectionStart !== textArea.selectionEnd;
-    if (e.ctrlKey || e.metaKey) {
-      if (textArea.selectionStart === textArea.selectionEnd) {
-        if (e.key === "c" || e.key === "x") {
-          e.preventDefault();
-          const { lines, lineNumber, columnNumber } = getLineInfo();
-          await navigator.clipboard.writeText(
-            `${lineNumber === 0 && e.key === "x" ? "" : "\n"}${lines[lineNumber]}`
-          );
-          if (e.key === "x") {
-            const newPos = textArea.selectionStart - columnNumber;
-            lines.splice(lineNumber, 1);
-            valueTextarea = lines.join("\n");
-            setTimeout(() => {
-              textArea.setSelectionRange(newPos, newPos);
-            }, 0);
-          }
-        }
-      }
-    }
-    if ((e.ctrlKey || e.metaKey) && e.key) {
-      const matchedEl = contentElements.find((el) => el.key === e.key);
-      if (matchedEl)
-        addContent(matchedEl);
-    } else if (nextCharIsClosing && (nextChar === e.key || e.key === "ArrowRight") && openChars.length && !highlighted) {
-      e.preventDefault();
-      textArea.setSelectionRange(
-        textArea.selectionStart + 1,
-        textArea.selectionEnd + 1
-      );
-      openChars.pop();
-    } else if (e.key in keyPairs) {
-      e.preventDefault();
-      await addContent({
-        display: "wrap",
-        text: e.key,
-        icon: "",
-        title: ""
-      });
-      openChars.push(e.key);
-    }
-  }
-};
-const trimSelection = () => {
-  if (textArea.selectionStart !== textArea.selectionEnd) {
-    if (valueTextarea[textArea.selectionStart] === " ") {
-      textArea.setSelectionRange(
-        textArea.selectionStart + 1,
-        textArea.selectionEnd
-      );
-    }
-    if (valueTextarea[textArea.selectionEnd - 1] === " ") {
-      textArea.setSelectionRange(
-        textArea.selectionStart,
-        textArea.selectionEnd - 1
-      );
-    }
-  }
-};
-const updateSelectionStart = () => {
-  selectionStartTextarea = textArea.selectionStart;
-};
-const getLineInfo = () => {
-  const lines = valueTextarea.split("\n");
-  let characterCount = 0;
-  for (let i = 0; i < lines.length; i++) {
-    characterCount++;
-    characterCount += lines[i].length;
-    if (characterCount > textArea.selectionEnd) {
-      return {
-        lines,
-        lineNumber: i,
-        columnNumber: textArea.selectionEnd - (characterCount - lines[i].length - 1)
-      };
-    }
-  }
-  return { lines, lineNumber: 0, columnNumber: 0 };
-};
-const getCurrentBlock = () => {
-  const blocks = valueTextarea.split("```");
-  let totalChars = 0;
-  for (const [i, block] of blocks.entries()) {
-    totalChars += block.length + 3;
-    if (textArea.selectionStart < totalChars) {
-      return i;
-    }
-  }
-  return 0;
-};
-const getRepeat = (str) => {
-  const blockStrings = [];
-  contentElements.forEach((el) => {
-    if (el.display === "block")
-      blockStrings.push(el.text);
-  });
-  for (let i = 0; i < blockStrings.length; i++) {
-    const repeatString = blockStrings[i];
-    if (str.startsWith(repeatString)) {
-      return repeatString;
-    }
-  }
-  const repeatNum = startsWithNumberAndPeriod(str);
-  if (repeatNum)
-    return `${repeatNum}. `;
-  return "";
-};
-const startsWithNumberAndPeriod = (str) => {
-  const result = str.match(/^(\d+)\./);
-  return result ? Number(result[1]) : null;
-};
-const correctFollowing = (currentLineNumber, decrement = false) => {
-  const { lines } = getLineInfo();
-  for (let i = currentLineNumber + 1; i < lines.length; i++) {
-    const num = startsWithNumberAndPeriod(lines[i]);
-    if (!num) {
-      break;
-    } else {
-      let newNum;
-      if (decrement) {
-        if (num > 1) {
-          newNum = num - 1;
-        } else {
-          break;
-        }
-      } else {
-        newNum = num + 1;
-      }
-      lines[i] = lines[i].slice(String(num).length);
-      lines[i] = String(newNum) + lines[i];
-    }
-  }
-  valueTextarea = lines.join("\n");
-};
-onMount(() => clientJs = true);
-</script>
-
-<textarea
-	id={idTextarea}
-	class={classTextarea}
-	name={nameTextarea}
-	placeholder={placeholderTextarea}
-	spellcheck={spellcheckTextarea}
-	on:keydown={onKeyDown}
-	on:keyup={updateSelectionStart}
-	on:dblclick={trimSelection}
-	bind:value={valueTextarea}
-	bind:this={textArea}
-	on:click={() => {
-		openChars = [];
-		updateSelectionStart();
-	}}
-	on:input
-/>
-
-<div id={idControls} class={classControls}>
-	{#each contentElements as el}
-		<button
-			type="button"
-			class={el.class ? `${classButton} ${el.class}` : classButton}
-			on:click={() => addContent(el)}
-			title={el.title}
-			disabled={!clientJs}
-		>
-			{#if typeof el.icon !== "string"}
-				<svelte:component this={el.icon} />
-			{:else}
-				{el.icon}
-			{/if}
-		</button>
-	{/each}
-</div>

package/dist/components/Editor.svelte.d.ts

@@ -1,111 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type ComponentType } from "svelte";
-declare const __propDef: {
-    props: {
-        /** an array of `EditorContentElement`s for the controls */ contentElements?: {
-            /** title of element and it's corresponding button */
-            title: string;
-            /** text to add */
-            text: string;
-            /** controls how the text is added */
-            display: "inline" | "block" | "wrap";
-            /** contents of the `button` */
-            icon: string | ComponentType<any>;
-            /** keyboard shortcut */
-            key?: string | undefined;
-            /** class to apply to the specific `button` */
-            class?: string | undefined;
-        }[] | undefined;
-        /** `value` of the `textarea` element */ valueTextarea?: string | undefined;
-        /** `placeholder` of the `textarea` element */ placeholderTextarea?: string | undefined;
-        /** `spellcheck` of the `textarea` element */ spellcheckTextarea?: boolean | undefined;
-        /** `class` of the `textarea` element */ classTextarea?: string | undefined;
-        /** `id` of the `textarea` element */ idTextarea?: string | undefined;
-        /** `name` of the `textarea` element */ nameTextarea?: string | undefined;
-        /** `class` of all the `button` elements */ classButton?: string | undefined;
-        /** `class` of the `div` that wraps the controls */ classControls?: string | undefined;
-        /** `id` of the `div` that wraps the controls */ idControls?: string | undefined;
-        /** `selectionStart` value of the `textarea` */ selectionStartTextarea?: number | undefined;
-        /** keys that will auto-close if typed, value is their closing character */ keyPairs?: {
-            [key: string]: string;
-        } | undefined;
-    };
-    events: {
-        input: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type EditorProps = typeof __propDef.props;
-export type EditorEvents = typeof __propDef.events;
-export type EditorSlots = typeof __propDef.slots;
-/**
- * ### Editor
- *
- * `textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, the `valueTextarea` is just a `string`, so you can easily store it in a database or manipulate it without learning a separate API.
- *
- * - This component is used to create [Typo](https://typo.robino.dev)
- *
- * @props
- *
- * - `classButton` - `class` of all the `button` elements
- * - `classControls` - `class` of the `div` that wraps the controls
- * - `classTextarea` - `class` of the `textarea` element
- * - `contentElements` - an array of `EditorContentElement`s for the controls
- * - `idControls` - `id` of the `div` that wraps the controls
- * - `idTextarea` - `id` of the `textarea` element
- * - `keyPairs` - keys that will auto-close if typed, value is their closing character
- * - `nameTextarea` - `name` of the `textarea` element
- * - `placeholderTextarea` - `placeholder` of the `textarea` element
- * - `selectionStartTextarea` - `selectionStart` value of the `textarea`
- * - `spellcheckTextarea` - `spellcheck` of the `textarea` element
- * - `valueTextarea` - `value` of the `textarea` element
- *
- * @Events
- *
- * | name    | event                   |
- * | ------- | ----------------------- |
- * | `input` | forward from `textarea` |
- *
- * @example
- *
- * ```svelte
- * <script lang="ts">
- * import { Editor } from "drab";
- * </script>
- *
- * <Editor
- * classButton="button button-primary"
- * classControls="flex gap-2"
- * classTextarea="input h-36 mb-2"
- * placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
- * contentElements={[
- * 	{
- * 		title: "Bullet",
- * 		text: "- ",
- * 		display: "block",
- * 		icon: "Bullet",
- * 	},
- * 	{
- * 		title: "Italic",
- * 		text: "*",
- * 		display: "wrap",
- * 		icon: "Italic",
- * 		key: "i",
- * 		class: "italic",
- * 	},
- * 	{
- * 		title: "Anchor",
- * 		text: "[text](href)",
- * 		display: "inline",
- * 		icon: "Anchor",
- * 		key: "[",
- * 	},
- * ]}
- * />
- * ```
- */
-export default class Editor extends SvelteComponent<EditorProps, EditorEvents, EditorSlots> {
-}
-export {};