@mythrantic/svelte-rich-text 0.2.8

package/README.md

@@ -0,0 +1,289 @@
+# Valiant Rich Text Svelte Component
+
+![valiantlynx logo](./static/valiantlynx.jpg)
+
+## Introduction
+
+The **Valiant Rich Text Svelte Component** is a powerful and versatile rich text editor for Svelte applications. It allows users to create, edit, and manage structured text content by adding various blocks with associated data. This component is designed to be highly customizable, responsive on mobile devices, and supportive of both editing and viewing modes.
+
+## Installation
+
+To get started with the Valiant Rich Text Svelte Component, you can install it via your package manager of choice:
+
+```bash
+npm install @valiantlynx/svelte-rich-text
+# or
+yarn add @valiantlynx/svelte-rich-text
+# or
+pnpm i @valiantlynx/svelte-rich-text
+```
+
+## Basic Usage
+
+To use the valiantlynx Rich Text editor, import the `ValiantRichText` component and include it in your Svelte application.
+
+```svelte
+<script>
+  import { ValiantRichText } from '@valiantlynx/svelte-rich-text';
+</script>
+
+<ValiantRichText />
+```
+
+## Data Structure
+
+The rich text editor works with a specific data structure known as `dataBlock`. This type includes:
+
+- `image`: Represents image blocks with data such as base64 representation, name, and caption.
+- `paragraph`: Basic text blocks.
+- `code`: Code blocks with text content and a specified programming language.
+- `quote`: Text quotes with owner attribution.
+- `header`: Header blocks with different levels (1 to 4) and associated text.
+- `space`: Empty space blocks with a specified size.
+- `list`: List blocks with items and an ordered or unordered list type.
+
+```ts
+type dataBlock =
+	| { name: 'image'; id: string; data: { base64: string; name: string; caption: string } }
+	| { name: 'paragraph'; id: string; data: { text: string } }
+	| { name: 'code'; id: string; data: { text: string; lang: languages } }
+	| { name: 'quote'; id: string; data: { text: string; owner: string } }
+	| { name: 'header'; id: string; data: { text: string; level: 1 | 2 | 3 | 4 } }
+	| { name: 'space'; id: string; data: { size: number } }
+	| { name: 'list'; id: string; data: { items: string[]; type: 'ordered' | 'unordered' } };
+```
+
+### Block States
+
+Each block in the Valiant Rich Text editor can exist in one of three states:
+
+1. **View State:** In this state, the block displays its information based on its type and associated data.
+2. **Focus State:** When a user clicks on a block, it switches to the focus state. In this state, the block is wrapped with a wrapper that provides options for deleting the block and reordering it (moving it up or down).
+3. **Edit State:** Upon another click, the block enters the edit state, allowing the user to modify the block's information. ## Customization
+
+## Customization
+
+You can customize various aspects of the rich text editor:
+
+- **Colors:**
+
+  - `primaryColor`: Used in both focus and view states.
+  - `secondaryColor`: Specifically used in the edit state.
+  - `textColor`: Defines the text color within the editor.
+  - `bgColor`: Specifies the background color of the editor.
+
+- **Fonts:**
+
+  - `headerFont`: Set the font for header elements (e.g., h1, h2, h3, h4).
+  - `bodyFont`: Define the font for general text elements (e.g., p, span, label, li, a).
+
+- **Font Sizes and Line Heights:**
+
+  - Customize font sizes using `h1`, `h2`, `h3`, `h4`, `body`, `small`.
+  - Set line heights for various text elements using `lh1`, `lh2`, `lh3`, `lh4`, and `lbody`.
+
+- **Custom Code Themes:** Uses themes from `prism.js` for code blocks and highlights.
+
+- **Initial Data:** You can prepopulate the editor with initial data by passing an array of `dataBlock` to the `initialData` prop.
+
+- **Custom Code Block Languages:** Define the list of languages users can use for code blocks with the `codeBlockLanguages` prop. By default, it includes JavaScript, Java, C, CSS, TypeScript, Python, and C#.
+
+- **Custom spacing:** By default **valiant** separate blocks with 10px gap and have **margin-block** set to 30px you can change that using **blocksGap** and **marginBlock** props .
+
+- **Custom Components:** You can replace the default view components for various block types with your custom components. For example:
+  - `customImage` for image blocks
+  - `customCode` for code blocks
+  - `customList` for list blocks
+  - `customHeader` for header blocks
+  - `customParagraph` for paragraph blocks
+  - `customQuote` for quote blocks
+
+```ts
+export let customImage: ComponentType<
+	SvelteComponent<{ base64: string; name: string; caption: string }>
+> = ViewImage;
+
+export let customCode: ComponentType<SvelteComponent<{ text: string; lang: languages }>> = ViewCode;
+
+export let customList: ComponentType<
+	SvelteComponent<{ items: string[]; type: 'ordered' | 'unordered' }>
+> = ViewList;
+
+export let customHeader: ComponentType<SvelteComponent<{ text: string; level: 1 | 2 | 3 | 4 }>> =
+	ViewHeader;
+
+export let customParagraph: ComponentType<SvelteComponent<{ text: string }>> = ViewParagraph;
+
+export let customQuote: ComponentType<SvelteComponent<{ text: string; owner: string }>> = ViewQuote;
+```
+
+## View Mode
+
+The Valiant Rich Text editor includes a `viewMode` prop, which, when set to `true`, allows you to use the editor in a read-only mode. In this mode, you can display existing content without enabling editing.
+
+```svelte
+<script>
+  import { ValiantRichText } from '@valiantlynx/svelte-rich-text';
+</script>
+
+<ValiantRichText viewMode={true} />
+```
+
+## The getData Function
+
+The package provides a function to retrieve the `dataBlock` at any given moment. Here is an example:
+
+```ts
+<script>
+  import { ValiantRichText, getData } from '@valiantlynx/svelte-rich-text';
+</script>
+
+<ValiantRichText viewMode={true} />
+<Button on:click={()=>{
+  const data = getData(); // returns dataBlock[] type
+  saveData(data);
+}}>Save</Button>
+```
+
+## Svelte Highlight
+
+The package uses `prism.js` for code highlighting. To use it, you need to import the `prism.css` file in your application. You can do this by adding the following line to your `index.html` file:
+
+```html
+<svelte:head>
+    <!-- Include Prism.js and its CSS theme for syntax highlighting -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" />
+</svelte:head>
+```
+
+## Props
+
+Here are all ValiantRichText props and their default values:
+
+```ts
+export let initialData: dataBlock[] = [];
+
+export let viewMode = false;
+
+export let blocksGap = 10;
+
+export let marginBlock = 30;
+
+export let headerFont = `Verdana, sans-serif`;
+
+export let bodyFont = `Helvetica, sans-serif`;
+
+export let primaryColor = '#3366FF';
+
+export let secondaryColor = '#1eeb36';
+
+export let textColor = '#121212';
+
+export let bgColor = '#ffffff';
+
+export let h1 = 'clamp(1.8rem, calc(1.8rem + ((1vw - 0.48rem) * 0.9722)), 2.1rem)';
+
+export let h2 = 'clamp(1.5rem, calc(1.5rem + ((1vw - 0.48rem) * 0.9722)), 1.8rem)';
+
+export let h3 = 'clamp(1.2rem, calc(1.2rem + ((1vw - 0.48rem) * 0.9722)), 1.5rem)';
+
+export let h4 = 'clamp(1.125rem, calc(1.15rem + ((1vw - 0.48rem) * 0.3472)), 1.2rem)';
+
+export let body = 'clamp(1rem, calc(1rem + ((1vw - 0.48rem) * 0.1736)), 1.125rem)';
+
+export let small = 'clamp(0.875rem, calc(0.875rem + ((1vw - 0.48rem) * 0.1736)), 1rem)';
+
+export let lh1 = '1.3';
+
+export let lh2 = '1.35';
+
+export let lh3 = '1.4';
+
+export let lh4 = '1.5';
+
+export let lbody = '1.6';
+
+export let codeTheme: string = nightOwl;
+
+export let customImage: ComponentType<
+	SvelteComponent<{ base64: string; name: string; caption: string }>
+> = ViewImage;
+
+export let customCode: ComponentType<SvelteComponent<{ text: string; lang: languages }>> = ViewCode;
+
+export let customList: ComponentType<
+	SvelteComponent<{ items: string[]; type: 'ordered' | 'unordered' }>
+> = ViewList;
+
+export let customHeader: ComponentType<SvelteComponent<{ text: string; level: 1 | 2 | 3 | 4 }>> =
+	ViewHeader;
+
+export let customParagraph: ComponentType<SvelteComponent<{ text: string }>> = ViewParagraph;
+
+export let customQuote: ComponentType<SvelteComponent<{ text: string; owner: string }>> = ViewQuote;
+
+		export let codeBlockLanguages: languages[] = [
+    'actionscript',
+    'angular', // For Angular templates
+    'assembly',
+    'bash',
+    'c',
+    'clojure',
+    'cobol',
+    'cpp', // C++
+    'csharp', // C#
+    'css',
+    'dart',
+    'dockerfile',
+    'elixir',
+    'elm',
+    'erlang',
+    'fortran',
+    'fsharp', // F#
+    'graphql',
+    'groovy',
+    'haskell',
+    'html',
+    'java',
+    'javascript',
+    'json',
+    'julia',
+    'kotlin',
+    'less',
+    'lua',
+    'markdown',
+    'matlab',
+    'nim',
+    'nodejs',
+    'objective-c',
+    'ocaml',
+    'pascal',
+    'perl',
+    'php',
+    'plaintext',
+    'powershell',
+    'python',
+    'r',
+    'react', // JSX
+    'reason', // ReasonML
+    'ruby',
+    'rust',
+    'sass',
+    'scala',
+    'scheme',
+    'shell', // General shell scripting
+    'sql',
+    'stylus',
+    'svelte',
+    'swift',
+    'toml',
+    'typescript',
+    'vbnet', // Visual Basic .NET
+    'vue',
+    'wasm', // WebAssembly
+    'xml',
+    'yaml'
+];
+
+```

package/dist/components/core/blockWrapper.svelte

@@ -0,0 +1,88 @@
+<script>import Code from "../editBlocks/code.svelte";
+import Header from "../editBlocks/header.svelte";
+import Img from "../editBlocks/img.svelte";
+import List from "../editBlocks/list.svelte";
+import Paragraph from "../editBlocks/paragraph.svelte";
+import Quote from "../editBlocks/quote.svelte";
+import { workingBlock } from "../../utils/stores.js";
+import Space from "../editBlocks/space.svelte";
+export let dataBlock;
+$: active = $workingBlock && $workingBlock.state == "editing" && $workingBlock.id == dataBlock.id;
+$: focused = $workingBlock && $workingBlock.state == "focused" && $workingBlock.id == dataBlock.id;
+</script>
+
+<div
+	class="blockWrapper"
+	class:focused
+	class:editing={active}
+	data-blockid={dataBlock.id}
+	data-blocktype={dataBlock.name}
+>
+	{#if dataBlock.name == 'header'}
+		<Header id={dataBlock.id} content={dataBlock.data} {active} />
+	{:else if dataBlock.name == 'code'}
+		<Code content={dataBlock.data} id={dataBlock.id} {active} />
+	{:else if dataBlock.name == 'image'}
+		<Img id={dataBlock.id} content={dataBlock.data} {active} />
+	{:else if dataBlock.name == 'list'}
+		<List id={dataBlock.id} content={dataBlock.data} {active} />
+	{:else if dataBlock.name == 'paragraph'}
+		<Paragraph id={dataBlock.id} content={dataBlock.data} {active} />
+	{:else if dataBlock.name == 'quote'}
+		<Quote id={dataBlock.id} content={dataBlock.data} {active} />
+	{:else}
+		<Space id={dataBlock.id} content={dataBlock.data} {active} />
+	{/if}
+	<span class="blockType">{dataBlock.name}</span>
+</div>
+
+<style>
+	.blockWrapper {
+		width: 100%;
+		padding-top: 30px;
+		position: relative;
+	}
+
+	.focused {
+		border: 2px solid var(--primaryColor);
+		border-radius: 8px;
+	}
+
+	.focused,
+	.editing {
+		padding-bottom: 10px;
+		padding-inline: 15px;
+	}
+	.editing {
+		border: 2px solid var(--secondaryColor);
+		border-radius: 8px;
+	}
+
+	.focused .blockType,
+	.editing .blockType {
+		display: inline-block;
+	}
+	.focused .blockType {
+		background-color: var(--primaryColor);
+	}
+
+	.editing .blockType {
+		background-color: var(--secondaryColor);
+	}
+
+	.blockType {
+		position: absolute;
+		width: fit-content;
+		height: fit-content;
+		top: 0%;
+		right: 0%;
+		font-size: var(--small);
+		color: var(--textColor);
+		font-weight: bold;
+		display: none;
+		padding-inline: 12px;
+		padding-block: 2px;
+		border-bottom-left-radius: 12px;
+		text-transform: capitalize;
+	}
+</style>

package/dist/components/core/blockWrapper.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { dataBlock } from '../../utils/consts.js';
+declare const __propDef: {
+    props: {
+        dataBlock: dataBlock;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type BlockWrapperProps = typeof __propDef.props;
+export type BlockWrapperEvents = typeof __propDef.events;
+export type BlockWrapperSlots = typeof __propDef.slots;
+export default class BlockWrapper extends SvelteComponent<BlockWrapperProps, BlockWrapperEvents, BlockWrapperSlots> {
+}
+export {};

package/dist/components/core/editMode.svelte

@@ -0,0 +1,95 @@
+<script>import { data, workingBlock } from "../../utils/stores";
+import { onMount } from "svelte";
+import BlockWrapper from "./blockWrapper.svelte";
+import ToolBar from "./toolBar.svelte";
+import DropDown from "../extra/dropDown.svelte";
+import UpIcon from "../icons/upIcon.svelte";
+import DeleteIcon from "../icons/deleteIcon.svelte";
+import DownIcon from "../icons/downIcon.svelte";
+function traverseParent(element) {
+  while (element) {
+    let currentId = element?.dataset.blockid;
+    if (typeof currentId == "string") return currentId;
+    element = element.parentElement;
+  }
+  return null;
+}
+function switchBlockState(event) {
+  const id = traverseParent(event.target);
+  if (!id) workingBlock.set(null);
+  else if ($workingBlock == null || $workingBlock.id !== id)
+    workingBlock.set({ id, state: "focused" });
+  else workingBlock.set({ id, state: "editing" });
+}
+function move(up) {
+  data.update((prev) => {
+    const index = prev.findIndex((val2) => val2.id == $workingBlock.id);
+    const val = prev.splice(index, 1)[0];
+    prev.splice(up ? index - 1 : index + 1, 0, val);
+    return prev;
+  });
+}
+function Delete() {
+  data.update((prev) => {
+    const newDataBlocks = prev.filter((element) => {
+      return element.id != $workingBlock.id;
+    });
+    return newDataBlocks;
+  });
+}
+onMount(() => {
+  window.addEventListener("click", switchBlockState);
+  return () => {
+    window.removeEventListener("click", switchBlockState);
+  };
+});
+</script>
+
+{#each $data as block}
+	<div class="block">
+		<BlockWrapper dataBlock={block} />
+		{#if $workingBlock?.id == block.id && $workingBlock.state == 'focused'}
+			<div class="menu">
+				<DropDown
+					options={[
+						{
+							label: 'move the block up',
+							icon: UpIcon,
+							cb: () => {
+								move(true);
+							}
+						},
+						{
+							icon: DownIcon,
+							label: 'move the block down',
+							cb: () => {
+								move(false);
+							}
+						},
+						{
+							icon: DeleteIcon,
+							label: 'Delete the block',
+							cb: () => {
+								Delete();
+							}
+						}
+					]}
+				/>
+			</div>
+		{/if}
+	</div>
+{/each}
+
+<ToolBar />
+
+<style>
+	.block {
+		display: flex;
+		width: 100%;
+		gap: 10px;
+		align-items: center;
+	}
+	.block .menu {
+		display: block;
+	}
+</style>

package/dist/components/core/editMode.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export type EditModeProps = typeof __propDef.props;
+export type EditModeEvents = typeof __propDef.events;
+export type EditModeSlots = typeof __propDef.slots;
+export default class EditMode extends SvelteComponent<EditModeProps, EditModeEvents, EditModeSlots> {
+}
+export {};

package/dist/components/core/main.svelte

@@ -0,0 +1,196 @@
+<script>import { data } from "../../utils/stores.js";
+import { setContext } from "svelte";
+import ViewImage from "../viewBlocks/viewImage.svelte";
+import ViewCode from "../viewBlocks/viewCode.svelte";
+import ViewHeader from "../viewBlocks/viewHeader.svelte";
+import ViewList from "../viewBlocks/viewList.svelte";
+import ViewParagraph from "../viewBlocks/viewParagraph.svelte";
+import ViewQuote from "../viewBlocks/viewQuote.svelte";
+import ViewMode from "./viewMode.svelte";
+import EditMode from "./editMode.svelte";
+export let initialData = [];
+export let viewMode = false;
+export let headerFont = `Verdana, sans-serif`;
+export let bodyFont = `Helvetica, sans-serif`;
+export let primaryColor = "#3366FF";
+export let secondaryColor = "#1eeb36";
+export let textColor = "#121212";
+export let bgColor = "#ffffff";
+export let blocksGap = 10;
+export let marginBlock = 30;
+export let h1 = "clamp(1.8rem, calc(1.8rem + ((1vw - 0.48rem) * 0.9722)), 2.1rem)";
+export let h2 = "clamp(1.5rem, calc(1.5rem + ((1vw - 0.48rem) * 0.9722)), 1.8rem)";
+export let h3 = "clamp(1.2rem, calc(1.2rem + ((1vw - 0.48rem) * 0.9722)), 1.5rem)";
+export let h4 = "clamp(1.125rem, calc(1.15rem + ((1vw - 0.48rem) * 0.3472)), 1.2rem)";
+export let body = "clamp(1rem, calc(1rem + ((1vw - 0.48rem) * 0.1736)), 1.125rem)";
+export let small = "clamp(0.875rem, calc(0.875rem + ((1vw - 0.48rem) * 0.1736)), 1rem)";
+export let lh1 = "1.3";
+export let lh2 = "1.35";
+export let lh3 = "1.4";
+export let lh4 = "1.5";
+export let lbody = "1.6";
+export let customImage = ViewImage;
+export let customCode = ViewCode;
+export let customList = ViewList;
+export let customHeader = ViewHeader;
+export let customParagraph = ViewParagraph;
+export let customQuote = ViewQuote;
+export let codeBlockLanguages = [
+  "actionscript",
+  "angular",
+  // For Angular templates
+  "assembly",
+  "bash",
+  "c",
+  "clojure",
+  "cobol",
+  "cpp",
+  // C++
+  "csharp",
+  // C#
+  "css",
+  "dart",
+  "dockerfile",
+  "elixir",
+  "elm",
+  "erlang",
+  "fortran",
+  "fsharp",
+  // F#
+  "graphql",
+  "groovy",
+  "haskell",
+  "html",
+  "java",
+  "javascript",
+  "json",
+  "julia",
+  "kotlin",
+  "less",
+  "lua",
+  "markdown",
+  "matlab",
+  "nim",
+  "nodejs",
+  "objective-c",
+  "ocaml",
+  "pascal",
+  "perl",
+  "php",
+  "plaintext",
+  "powershell",
+  "python",
+  "r",
+  "react",
+  // JSX
+  "reason",
+  // ReasonML
+  "ruby",
+  "rust",
+  "sass",
+  "scala",
+  "scheme",
+  "shell",
+  // General shell scripting
+  "sql",
+  "stylus",
+  "svelte",
+  "swift",
+  "toml",
+  "typescript",
+  "vbnet",
+  // Visual Basic .NET
+  "vue",
+  "wasm",
+  // WebAssembly
+  "xml",
+  "yaml"
+];
+setContext("Image", customImage);
+setContext("Code", customCode);
+setContext("Header", customHeader);
+setContext("Paragraph", customParagraph);
+setContext("List", customList);
+setContext("Quote", customQuote);
+setContext("languages", codeBlockLanguages);
+data.set(initialData);
+</script>
+
+<div
+	class="main"
+	style:--primaryColor={primaryColor}
+	style:--secondaryColor={secondaryColor}
+	style:--textColor={textColor}
+	style:--headingFont={headerFont}
+	style:--bodyFont={bodyFont}
+	style:--bgColor={bgColor}
+	style:--h1={h1}
+	style:--h2={h2}
+	style:--h3={h3}
+	style:--h4={h4}
+	style:--body={body}
+	style:--small={small}
+	style:--lh1={lh1}
+	style:gap="{blocksGap}px"
+	style:--lh2={lh2}
+	style:--lh3={lh3}
+	style:--lh4={lh4}
+	style:--lbody={lbody}
+	style:margin-block="{marginBlock}px"
+>
+	{#if viewMode}
+		<ViewMode />
+	{:else}
+		<EditMode />
+	{/if}
+</div>
+
+<style>
+	.main {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.main :global(*) {
+		box-sizing: border-box;
+		margin: 0;
+		padding: 0;
+	}
+	.main :global(h1),
+	.main :global(h2),
+	.main :global(h3),
+	.main :global(h4) {
+		font-family: var(--headingFont);
+		font-weight: bold;
+		color: var(--textColor);
+		word-break: break-word;
+	}
+	.main :global(h1) {
+		font-size: var(--h1);
+		line-height: var(--lh1);
+	}
+	.main :global(h2) {
+		font-size: var(--h2);
+		line-height: var(--lh2);
+	}
+	.main :global(h3) {
+		font-size: var(--h3);
+		line-height: var(--lh3);
+	}
+	.main :global(h4) {
+		font-size: var(--h4);
+		line-height: var(--lh4);
+	}
+
+	.main :global(span),
+	.main :global(li),
+	.main :global(p),
+	.main :global(i),
+	.main :global(label) {
+		word-break: break-word;
+		font-family: var(--bodyFont);
+		font-size: var(--body);
+		font-weight: 400;
+		line-height: var(--lbody);
+	}
+</style>