### Install svelte-lexical Package

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/getting-started.mdx

Installs the `svelte-lexical` package into your project using the pnpm package manager. This is the first step to integrate the rich text editor functionality.

```bash
pnpm add svelte-lexical
```

--------------------------------

### Start Y-websocket Server (Shell)

Source: https://github.com/umaranis/svelte-lexical/blob/master/docs/collaboration.md

Command to start the y-websocket server for collaboration. Ensure you are in the `/demos/playground` directory and have pnpm installed. The PORT environment variable can be set to your desired port.

```shell
PORT=1234 pnpm y-websocket-server
```

--------------------------------

### Download Icons using GitHub API and wget

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/getting-started.mdx

Provides a bash command to download all icons used by `svelte-lexical` from its GitHub repository. These icons are necessary for the toolbar and dialogs within the rich text editor. The command fetches download URLs and saves the icons to the specified local directory.

```bash
curl -s https://api.github.com/repos/umaranis/svelte-lexical/contents/packages/svelte-lexical/static/images/icons \
    | grep 'download_url' | cut -d '"' -f 4 | xargs -I {} wget -P static/images/icons {}
```

--------------------------------

### Import Default Theme in Svelte

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/getting-started.mdx

Shows how to import the default theme provided by `svelte-lexical`. This theme styles the `RichTextComposer` and its associated elements. It needs to be imported alongside the component itself.

```svelte
<script>
  import {RichTextComposer} from 'svelte-lexical';
  import {theme} from 'svelte-lexical/dist/themes/default';
</script>
```

--------------------------------

### Use RichTextComposer with Theme in Svelte

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/getting-started.mdx

Illustrates the usage of the `RichTextComposer` component in a Svelte file, passing the imported `theme` as a prop. This renders the rich text editor with the default styling.

```svelte
<script>
  import {RichTextComposer} from 'svelte-lexical';
  import {theme} from 'svelte-lexical/dist/themes/default';
</script>

<RichTextComposer {theme} />
```

--------------------------------

### Run svelte-lexical Demo Project

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/svelte-lexical/README.md

Commands to run the playground demo project for svelte-lexical. This includes navigating to the demo's directory and starting the development server.

```bash
cd ../../demos/playground
pnpm dev
```

--------------------------------

### Import RichTextComposer Component in Svelte

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/getting-started.mdx

Demonstrates how to import the `RichTextComposer` component from the `svelte-lexical` library into a Svelte component or page. This component is essential for rendering the rich text editor.

```svelte
<script>
  import {RichTextComposer} from 'svelte-lexical';
</script>
```

--------------------------------

### Build svelte-lexical Library

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/svelte-lexical/README.md

Commands to build the svelte-lexical library within its monorepo. This involves navigating to the package directory, installing dependencies, and executing the build script.

```bash
cd packages/svelte-lexical
pnpm i
pnpm build
```

--------------------------------

### Run Collaboration E2E Tests on Chromium

Source: https://github.com/umaranis/svelte-lexical/blob/master/docs/testing.md

Executes end-to-end collaboration tests specifically on the Chromium browser. This requires starting the playground demo and a separate collaboration server first.

```bash
cd demos/playground
pnpm dev
pnpm collab
pnpm test-e2e-collab-chromium
```

--------------------------------

### Combine Text Formatting and Element Transformers in Svelte

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/plugins/markdown-shortcuts.mdx

This example illustrates how to create a custom set of transformers by combining predefined arrays like `TEXT_FORMAT_TRANSFORMERS` with other specific transformers such as IMAGE and LINK. This allows for a flexible configuration of markdown shortcuts.

```svelte
<MarkdownShortcutPlugin
  transformers={[IMAGE, LINK, ...TEXT_FORMAT_TRANSFORMERS]} />
```

--------------------------------

### Debug All E2E Tests with Playwright Inspector

Source: https://github.com/umaranis/svelte-lexical/blob/master/docs/testing.md

Starts Playwright in debug mode for all tests, enabling the Playwright Inspector. This is useful for working with locators and stepping through test execution visually.

```bash
cd demos/playground
npx playwright test --debug
```

--------------------------------

### Get Editor Reference using getEditor() via Svelte Context API

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/get-reference-to-editor.mdx

This snippet shows how to obtain the Lexical editor object reference using the `getEditor()` function, which leverages Svelte's Context API. This approach is simpler for direct access within the Composer context but is limited to being called during component initialization. The example includes a `ReadonlyButton` component that uses this method to disable editing.

```svelte
// ReadonlyButton.svelte
<script lang="ts">
	import { getEditor } from 'svelte-lexical';
	const editor = getEditor();
</script>

<button on:click={() => editor.setEditable(false)}>
	Read Only Mode
</button>
```

```svelte
// MyEditor.svelte
<script lang="ts">
	import {
		Composer, ContentEditable, getEditor,
		HorizontalRuleNode, HorizontalRulePlugin, RichTextPlugin
	} from 'svelte-lexical';
	import { theme } from 'svelte-lexical/dist/themes/default';
	import MyToolbar from './MyToolbar.svelte';
+import ReadonlyButton from './ReadonlyButton.svelte';

	const initialConfig = {
		theme: theme,
		namespace: 'pg_demo',
		nodes: [HorizontalRuleNode],
		onError: (error: Error) => {
			throw error;
		}
	};
</script>

<Composer {initialConfig}>
	<div class="editor-shell svelte-lexical">
		<MyToolbar />
+    <ReadonlyButton/>
		<div class="editor-container">
			<div class="editor-scroller">
				<div class="editor">
					<ContentEditable />
				</div>
			</div>
			<RichTextPlugin />
			<HorizontalRulePlugin />
		</div>
	</div>
</Composer>
```

--------------------------------

### Configure Specific Markdown Transformers in Svelte

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/plugins/markdown-shortcuts.mdx

This example demonstrates how to selectively enable specific markdown transformers for the MarkdownShortcutPlugin. You can pass an array of desired transformers, such as INLINE_CODE and BOLD_STAR, to the `transformers` attribute.

```svelte
<MarkdownShortcutPlugin transformers={[INLINE_CODE, BOLD_STAR]} />
```

--------------------------------

### Get Editor Reference using Composer.getEditor() in Svelte

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/get-reference-to-editor.mdx

This snippet demonstrates how to get a reference to the Lexical editor object using the `Composer.getEditor()` method in Svelte. It shows binding the Composer component to a variable and then using that variable to access the editor instance for setting it to read-only mode. This method requires the `Composer` component to be rendered.

```svelte
<script lang="ts">
	import { Composer, ContentEditable, getEditor, HorizontalRuleNode, HorizontalRulePlugin, RichTextPlugin } from 'svelte-lexical';
  import {theme} from 'svelte-lexical/dist/themes/default';
	import MyToolbar from './MyToolbar.svelte';

  const initialConfig = {
    theme: theme,
    namespace: 'pg_demo',
    nodes: [HorizontalRuleNode],
    onError: (error: Error) => {
      throw error;
    },
  };

+  let composer: Composer;
</script>

+<button on:click={() => composer.getEditor().setEditable(false)}>
+  Read Only Mode
+</button>

-<Composer {initialConfig}>
+<Composer {initialConfig} bind:this={composer}>
  <div class="editor-shell svelte-lexical">
    <MyToolbar />
    <div class="editor-container">
      <div class="editor-scroller">
        <div class="editor">
          <ContentEditable />
        </div>
      </div>
      <RichTextPlugin />
      <HorizontalRulePlugin />
    </div>
  </div>
</Composer>
```

--------------------------------

### Debug Specific E2E Tests with Playwright Inspector

Source: https://github.com/umaranis/svelte-lexical/blob/master/docs/testing.md

Starts Playwright in debug mode for a specific test file or group of tests, identified by a pattern. This allows focused debugging of particular test cases.

```bash
cd demos/playground
npx playwright test List --debug
```

--------------------------------

### Launch Editor in Read Mode (Svelte)

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/read-mode-edit-mode.mdx

Configures the Svelte Lexical editor to start in read-only mode by default. This is achieved by setting the `editable` property to `false` within the `initialConfig` object during editor initialization.

```svelte
	const initialConfig = {
		theme: theme,
		namespace: 'pg_demo',
		nodes: [HorizontalRuleNode],
    	editable: false,
		onError: (error: Error) => {
			throw error;
		}
	};

```

--------------------------------

### Import HTML Content into Svelte Lexical Editor

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/import-export/html.mdx

This example shows how to import HTML content into a Svelte Lexical editor. It uses `DOMParser` to parse an HTML string and `generateNodesFromDOM` to convert it into Lexical nodes, which are then inserted into the editor's root. The import operation is performed within an editor update transaction.

```svelte
<script lang="ts">
	import {
		Composer,
		ContentEditable,
		HorizontalRuleNode,
		HorizontalRulePlugin,
		RichTextPlugin,
		$getRoot as getRoot,
		generateNodesFromDOM
	} from 'svelte-lexical';
	import { theme } from 'svelte-lexical/dist/themes/default';
	import MyToolbar from './MyToolbar.svelte';

	const initialConfig = {
		theme: theme,
		namespace: 'pg_demo',
		nodes: [HorizontalRuleNode],
		onError: (error: Error) => {
			throw error;
		}
	};

	let composer: Composer;
	let htmlString = `<p class="SL_Theme__paragraph" dir="ltr"><span style="white-space: pre-wrap;">Hello </span><b><strong class="SL_Theme__textBold" style="white-space: pre-wrap;">World</strong></b><span style="white-space: pre-wrap;">!</span></p>`;
</script>

<button
	onclick={() => {
		const editor = composer.getEditor();
		editor.update(() => {
			// In the browser you can use the native DOMParser API to parse the HTML string.
			const parser = new DOMParser();
			const dom = parser.parseFromString(htmlString, 'text/html');

			// Once you have the DOM instance it's easy to generate LexicalNodes.
			const nodes = generateNodesFromDOM(editor, dom);

			// Select the root
			const selection = getRoot().select();

			// Insert them at a selection.
			selection.insertNodes(nodes);
		});
	}}>Import HTML</button
>

<Composer {initialConfig} bind:this={composer}>
	<div class="editor-shell svelte-lexical">
		<MyToolbar />
		<div class="editor-container">
			<div class="editor-scroller">
				<div class="editor">
					<ContentEditable />
				</div>
			</div>
			<RichTextPlugin />
			<HorizontalRulePlugin />
		</div>
	</div>
</Composer>
```

--------------------------------

### Export Editor State to JSON in Svelte Lexical

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/import-export/json.mdx

This snippet shows how to export the current editor state to a JSON format. It utilizes the `editor.getEditorState().toJSON()` method to get the JSON representation of the editor's content. The exported JSON is then logged to the console. This is useful for saving the editor's state.

```svelte
<script lang="ts">
	import {
		Composer, ContentEditable,
		HorizontalRuleNode,
		HorizontalRulePlugin,
		RichTextPlugin
	} from 'svelte-lexical';
	import { theme } from 'svelte-lexical/dist/themes/default';
	import MyToolbar from './MyToolbar.svelte';

	const initialConfig = {
		theme: theme,
		namespace: 'pg_demo',
		nodes: [HorizontalRuleNode],
		onError: (error: Error) => {
			throw error;
		}
	};

	let composer: Composer;
</script>

<button
	onclick={() => {
		const json = composer.getEditor().getEditorState().toJSON();
    console.log(json);
	}}>Export JSON</button
>

<Composer {initialConfig} bind:this={composer}>
	<div class="editor-shell svelte-lexical">
		<MyToolbar />
		<div class="editor-container">
			<div class="editor-scroller">
				<div class="editor">
					<ContentEditable />
				</div>
			</div>
			<RichTextPlugin />
			<HorizontalRulePlugin />
		</div>
	</div>
</Composer>
```

--------------------------------

### Run svelte-lexical Demo (Monorepo)

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/svelte-lexical/README.md

A command to run a demo project, specifically the playground, directly from the monorepo root using pnpm.

```bash
pnpm -C demos/playground dev
```

--------------------------------

### Launch Playwright UI for Interactive Testing

Source: https://github.com/umaranis/svelte-lexical/blob/master/docs/testing.md

Launches the Playwright UI, providing an interactive environment to run and debug tests. This UI offers features like step-through execution and visual debugging.

```bash
cd demos/playground
pn playwright test --ui
```

--------------------------------

### Run Unit Tests with Jest

Source: https://github.com/umaranis/svelte-lexical/blob/master/docs/testing.md

Executes unit tests for the svelte-lexical package using Jest and Testing Library. This command should be run from the project root with pnpm.

```bash
pnpm -C packages/svelte-lexical test
```

--------------------------------

### Sample Commit Message Format

Source: https://github.com/umaranis/svelte-lexical/blob/master/docs/development-notes.md

A standardized format for commit messages is recommended for clarity and consistency. This format includes a type tag, a concise description, and an optional reference to an issue. Using keywords like 'fix' or 'close' can automatically resolve associated issues.

```text
feat: added functionality for task reminders, close #12
```

--------------------------------

### Create Svelte Editor Component with Toolbar

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/customizing-editor.mdx

This Svelte code demonstrates the creation of a custom editor component using svelte-lexical. It integrates the `Composer` component, a custom `MyToolbar.svelte`, `ContentEditable` for text input, and `RichTextPlugin` for rich text functionalities. The `initialConfig` object, defined previously, is passed to the `Composer`.

```svelte
// MyEditor.svelte
<script lang="ts">
	import { Composer, ContentEditable, RichTextPlugin } from 'svelte-lexical';
  import {theme} from 'svelte-lexical/dist/themes/default';
	import MyToolbar from './MyToolbar.svelte';

  const initialConfig = {
    theme: theme,
    namespace: 'pg_demo',
    nodes: [],
    onError: (error: Error) => {
      throw error;
    },
  };
</script>

<Composer {initialConfig}>
  <div class="editor-shell svelte-lexical">
    <MyToolbar />
    <div class="editor-container">
      <div class="editor-scroller">
        <div class="editor">
          <ContentEditable />
        </div>
      </div>
      <RichTextPlugin />
    </div>
  </div>
</Composer>
```

--------------------------------

### Configure Editor Initial State in Svelte

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/customizing-editor.mdx

This Svelte code snippet defines the initial configuration for a svelte-lexical editor. It imports the default theme and sets up essential properties like theme, namespace, nodes, and an error handler. This configuration is crucial for initializing the editor instance.

```svelte
// MyEditor.svelte
<script lang="ts">
  import {theme} from 'svelte-lexical/dist/themes/default';

  const initialConfig = {
    theme: theme,
    namespace: 'my_demo',
    nodes: [],
    onError: (error: Error) => {
      throw error;
    },
  };
</script>
```

--------------------------------

### Create Basic Toolbar in Svelte

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/customizing-editor.mdx

This snippet demonstrates the basic structure for creating a toolbar component in Svelte using the svelte-lexical library. It imports the Toolbar component and provides a placeholder for including desired controls.

```svelte
// MyToolbar.svelte
<script lang="ts">
  import {Toolbar} from 'svelte-lexical';
</script>

<Toolbar>
  <!-- include the desired controls here -->
</Toolbar>
```

--------------------------------

### Enable All Markdown Transformers in Svelte

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/plugins/markdown-shortcuts.mdx

This snippet shows the simplest way to enable all predefined markdown transformations by passing the `ALL_TRANSFORMERS` array to the `transformers` attribute of the MarkdownShortcutPlugin.

```svelte
<MarkdownShortcutPlugin transformers={ALL_TRANSFORMERS} />
```

--------------------------------

### Run All E2E Tests with Playwright

Source: https://github.com/umaranis/svelte-lexical/blob/master/docs/testing.md

Executes all end-to-end tests across supported browsers (Chromium, Firefox, Safari) for the playground package. Requires navigating to the playground directory first.

```bash
cd demos/playground
pnpm playwright test
```

--------------------------------

### Automated NPM Publish via GitHub Action

Source: https://github.com/umaranis/svelte-lexical/blob/master/docs/development-notes.md

This GitHub Actions workflow automatically publishes a new NPM package when a release is created on GitHub. It utilizes NPM for building and publishing, specifically avoiding PNPM due to a known bug. Ensure your project is set up to build correctly before publishing.

```yaml
# .github/workflows/npm-publish.yaml
name: Publish NPM package

on:
  release:
    types: [created]

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
          registry: 'https://registry.npmjs.org/'
      - run: npm ci
      - run: npm run build
      - name: Publish to npm
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
```

--------------------------------

### JavaScript: Create Split-Screen with Iframes

Source: https://github.com/umaranis/svelte-lexical/blob/master/demos/playground/split/index.html

This JavaScript code snippet dynamically creates two iframe elements and appends them to the document body. It configures each iframe to load the current application's URL, positioning them side-by-side to create a split-screen effect. It relies on the browser's `window.location` object to determine the source URL.

```javascript
(function () { const {port, hostname, protocol} = window.location; const leftIframe = document.createElement('iframe'); leftIframe.src = `${protocol}//${hostname}:${port}${window.location.search}`; leftIframe.style.cssText = 'border: 0; width: calc(50% - 1px); position: fixed; top: 0; left: 0; height: 100%;'; leftIframe.setAttribute('name', 'left'); document.body.appendChild(leftIframe); const rightIframe = document.createElement('iframe'); rightIframe.src = `${protocol}//${hostname}:${port}${window.location.search}`; rightIframe.style.cssText = 'border: 0; width: calc(50% - 1px); position: fixed; top: 0; left: calc(50% + 1px); height: 100%;'; rightIframe.setAttribute('name', 'right'); document.body.appendChild(rightIframe); })();
```

--------------------------------

### Create Toolbar with Controls in Svelte

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/customizing-editor.mdx

This Svelte code snippet shows how to build a comprehensive toolbar for the svelte-lexical editor. It imports and utilizes various formatting controls like BoldButton, FontFamilyDropDown, and FontSizeDropDown within the Toolbar component. The `children` snippet allows for dynamic rendering of toolbar elements based on editor state.

```svelte
// MyToolbar.svelte
<script lang="ts">
  import {
    BoldButton, Divider, ItalicButton, UnderlineButton, StrikethroughButton, 
    FormatCodeButton, DropDownAlign, FontFamilyDropDown, FontSizeDropDown, 
    Toolbar 
  } from 'svelte-lexical';
</script>

<Toolbar>
  {#snippet children({editor, activeEditor, blockType})}
    <FontFamilyDropDown />
    <FontSizeDropDown />
    <Divider />
    <BoldButton />
    <ItalicButton />
    <UnderlineButton />
    <StrikethroughButton />
    <FormatCodeButton />
    <Divider />
    <DropDownAlign />
  {/snippet}
</Toolbar>
```

--------------------------------

### Import Markdown Content to Editor (Svelte)

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/import-export/markdown.mdx

This snippet demonstrates how to import a Markdown string into the Svelte Lexical editor, replacing its current content. It uses the `convertFromMarkdownString` function. The code expects a Svelte component with a `Composer` instance and a Markdown string variable.

```svelte
<script lang="ts">
	import {
		Composer, ContentEditable, HorizontalRuleNode, HorizontalRulePlugin, RichTextPlugin,
    convertFromMarkdownString,
	} from 'svelte-lexical';
	import { theme } from 'svelte-lexical/dist/themes/default';
	import MyToolbar from './MyToolbar.svelte';

	const initialConfig = {
		theme: theme,
		namespace: 'pg_demo',
		nodes: [HorizontalRuleNode],
		onError: (error: Error) => {
			throw error;
		}
	};

	let composer: Composer;
  let markdownString = 'Hello **World!**';
</script>

<button
	onclick={() => {
		const editor = composer.getEditor();
		editor.update(() => {
			const markdown = convertFromMarkdownString(markdownString);
			console.log(markdown);
		});
	}}>Import Markdown</button
>

<Composer {initialConfig} bind:this={composer}>
	<div class="editor-shell svelte-lexical">
		<MyToolbar />
		<div class="editor-container">
			<div class="editor-scroller">
				<div class="editor">
					<ContentEditable />
				</div>
			</div>
			<RichTextPlugin />
			<HorizontalRulePlugin />
		</div>
	</div>
</Composer>
```

--------------------------------

### Export Editor Content to HTML in Svelte

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/import-export/html.mdx

This snippet demonstrates how to export the content of a Svelte Lexical editor to an HTML string. It utilizes the `generateHtmlFromNodes` function and logs the resulting HTML to the console. Ensure the `Composer` component is properly initialized and bound to a `composer` variable.

```svelte
<script lang="ts">
	import {
		Composer,
		ContentEditable,
		generateHtmlFromNodes,
		HorizontalRuleNode,
		HorizontalRulePlugin,
		RichTextPlugin
	} from 'svelte-lexical';
	import { theme } from 'svelte-lexical/dist/themes/default';
	import MyToolbar from './MyToolbar.svelte';

	const initialConfig = {
		theme: theme,
		namespace: 'pg_demo',
		nodes: [HorizontalRuleNode],
		onError: (error: Error) => {
			throw error;
		}
	};

	let composer: Composer;
</script>

<button
	onclick={() => {
		const editor = composer.getEditor();
		editor.read(() => {
			const html = generateHtmlFromNodes(editor);
			console.log(html);
		});
	}}>Export HTML</button
>

<Composer {initialConfig} bind:this={composer}>
	<div class="editor-shell svelte-lexical">
		<MyToolbar />
		<div class="editor-container">
			<div class="editor-scroller">
				<div class="editor">
					<ContentEditable />
				</div>
			</div>
			<RichTextPlugin />
			<HorizontalRulePlugin />
		</div>
	</div>
</Composer>
```

--------------------------------

### Clear Editor Content with Composer Reference (JavaScript)

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/clear-editor-content.mdx

This JavaScript snippet demonstrates how to clear the svelte-lexical editor's content directly using a reference to the composer instance. It calls the `update` method on the editor obtained from the composer, then uses `$getRoot().clear()` to remove all content. This method is useful when you have direct access to the composer object.

```javascript
composer.getEditor().update(() => {
	getRoot().clear();
});
```

--------------------------------

### Run E2E Tests for Chromium with Playwright

Source: https://github.com/umaranis/svelte-lexical/blob/master/docs/testing.md

Executes end-to-end tests specifically for the Chromium browser. This is a targeted approach for testing on a single browser.

```bash
cd demos/playground
pnpm test-e2e:chromium
```

--------------------------------

### Export Editor Content to Markdown (Svelte)

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/import-export/markdown.mdx

This snippet shows how to export the current content of the Svelte Lexical editor to a Markdown string and log it to the console. It utilizes the `convertToMarkdownString` function along with `ALL_TRANSFORMERS`. The code assumes an existing Svelte component with a `Composer` instance.

```svelte
<script lang="ts">
	import {
		Composer, ContentEditable, HorizontalRuleNode, HorizontalRulePlugin, RichTextPlugin,
    convertToMarkdownString, ALL_TRANSFORMERS,
	} from 'svelte-lexical';
	import { theme } from 'svelte-lexical/dist/themes/default';
	import MyToolbar from './MyToolbar.svelte';

	const initialConfig = {
		theme: theme,
		namespace: 'pg_demo',
		nodes: [HorizontalRuleNode],
		onError: (error: Error) => {
			throw error;
		}
	};

	let composer: Composer;
</script>

<button
	onclick={() => {
		const editor = composer.getEditor();
		editor.read(() => {
			const markdown = convertToMarkdownString(ALL_TRANSFORMERS);
			console.log(markdown);
		});
	}}>Export Markdown</button
>

<Composer {initialConfig} bind:this={composer}>
	<div class="editor-shell svelte-lexical">
		<MyToolbar />
		<div class="editor-container">
			<div class="editor-scroller">
				<div class="editor">
					<ContentEditable />
				</div>
			</div>
			<RichTextPlugin />
			<HorizontalRulePlugin />
		</div>
	</div>
</Composer>
```

--------------------------------

### Integrate MarkdownShortcutPlugin in Svelte Lexical Composer

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/plugins/markdown-shortcuts.mdx

This snippet shows how to include the MarkdownShortcutPlugin within the Svelte Lexical Composer component. It's necessary for enabling markdown shortcuts in the editor. Ensure the plugin is placed after other necessary plugins like RichTextPlugin.

```svelte
<Composer {initialConfig}>
  <div class="editor-shell">
    <ToolbarRichText />
    <div class="editor-container">
      <div class="editor-scroller">
        <div class="editor">
          <ContentEditable />
        </div>
      </div>
      <RichTextPlugin />

      <!-- other plugins -->

      <MarkdownShortcutPlugin transformers={ALL_TRANFORMERS} />

      <!-- other plugins -->
    </div>
  </div>
</Composer>
```

--------------------------------

### Display Custom Editor on Page in Svelte

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/customizing-editor.mdx

This Svelte code snippet shows how to embed the custom editor component (`MyEditor.svelte`) into a page. It imports `MyEditor` and renders it within the page's template, allowing users to interact with the customizable rich text editor.

```svelte
// +page.svelte
<script>
	import MyEditor from "./MyEditor.svelte";

</script>

<h1>Welcome to svelte-lexical</h1>

<MyEditor/>
```

--------------------------------

### Import JSON to Set Editor State in Svelte Lexical

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/import-export/json.mdx

This snippet demonstrates how to import JSON data to set the editor's content in Svelte Lexical. It takes a JSON string, parses it into an editor state using `editor.parseEditorState()`, and then applies this state to the editor using `editor.setEditorState()`. This effectively replaces any existing content with the imported JSON data.

```svelte
<script lang="ts">
	import {
		Composer,
		ContentEditable,
		HorizontalRuleNode,
		HorizontalRulePlugin,
		RichTextPlugin
	} from 'svelte-lexical';
	import { theme } from 'svelte-lexical/dist/themes/default';
	import MyToolbar from './MyToolbar.svelte';

	const initialConfig = {
		theme: theme,
		namespace: 'pg_demo',
		nodes: [HorizontalRuleNode],
		onError: (error: Error) => {
			throw error;
		}
	};

	let composer: Composer;
  const json = `...`;  // include JSON here (could be generated using editor.getEditorState())
</script>

<button
	onclick={() => {
    const editor = composer.getEditor();
    editor.setEditorState(editor.parseEditorState(json));
	}}>Import JSON</button
>

<Composer {initialConfig} bind:this={composer}>
	<div class="editor-shell svelte-lexical">
		<MyToolbar />
		<div class="editor-container">
			<div class="editor-scroller">
				<div class="editor">
					<ContentEditable />
				</div>
			</div>
			<RichTextPlugin />
			<HorizontalRulePlugin />
		</div>
	</div>
</Composer>
```

--------------------------------

### Enable Custom Node for Horizontal Rule Plugin in Svelte Lexical

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/add-plugin.mdx

This snippet shows how to modify the `initialConfig` in a Svelte Lexical editor to support a custom node, specifically `HorizontalRuleNode`. It involves adding the node to the `nodes` array within the configuration object. This is a prerequisite for using plugins that rely on custom nodes.

```svelte
// MyEditor.svelte
<script lang="ts">
  import { Composer, ContentEditable, HorizontalRuleNode, RichTextPlugin } from 'svelte-lexical';
  import {theme} from 'svelte-lexical/dist/themes/default';
  import MyToolbar from './MyToolbar.svelte';

  const initialConfig = {
    theme: theme,
    namespace: 'pg_demo',
     nodes: [],   
     nodes: [HorizontalRuleNode],
    onError: (error: Error) => {
      throw error;
    },
  };
</script>

<Composer {initialConfig}>
  <div class="editor-shell svelte-lexical">
    <MyToolbar />
    <div class="editor-container">
      <div class="editor-scroller">
        <div class="editor">
          <ContentEditable />
        </div>
      </div>
      <RichTextPlugin />
    </div>
  </div>
</Composer>
```

--------------------------------

### Clear Editor Content with Button Component (Svelte)

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/clear-editor-content.mdx

This Svelte component provides a button that, when clicked, clears all content within the svelte-lexical editor. It utilizes the `getEditor` and `$getRoot` functions to access and modify the editor's state. Ensure you have imported necessary functions from 'svelte-lexical'.

```svelte
// ClearButton.svelte
<script lang="ts">
	import { getEditor, $getRoot as getRoot } from 'svelte-lexical';
	const editor = getEditor();

	function clearContents() {
		editor.update(() => {
			getRoot().clear();
		});
	}
</script>

<button on:click={clearContents}>Clear the contents</button>
```

```svelte
// MyEditor.svelte
<script lang="ts">
	import { 
		Composer, ContentEditable, HorizontalRuleNode, HorizontalRulePlugin, RichTextPlugin	} from 'svelte-lexical';
	import { theme } from 'svelte-lexical/dist/themes/default';
	import MyToolbar from './MyToolbar.svelte';
	import ClearButton from './ClearButton.svelte';

	const initialConfig = {
		theme: theme,
		namespace: 'pg_demo',
		nodes: [HorizontalRuleNode],
		onError: (error: Error) => {
			throw error;
		}
	};
	let composer: Composer;
</script>

<Composer {initialConfig} bind:this={composer}>
	<div class="editor-shell svelte-lexical">
		<MyToolbar />
		<ClearButton />
		<div class="editor-container">
			<div class="editor-scroller">
				<div class="editor">
					<ContentEditable />
				</div>
			</div>
			<RichTextPlugin />
			<HorizontalRulePlugin />
		</div>
	</div>
</Composer>
```

--------------------------------

### Include Horizontal Rule Plugin in Svelte Lexical Editor

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/add-plugin.mdx

This code demonstrates how to integrate the `HorizontalRulePlugin` into a Svelte Lexical editor. It involves importing the plugin and adding it as a component within the `Composer` structure, typically alongside other Rich Text plugins. This step makes the horizontal rule functionality available in the editor.

```svelte
// MyEditor.svelte
<script lang="ts">
  import { Composer, ContentEditable, HorizontalRuleNode, HorizontalRulePlugin, RichTextPlugin } from 'svelte-lexical';
  import {theme} from 'svelte-lexical/dist/themes/default';
  import MyToolbar from './MyToolbar.svelte';

  const initialConfig = {
    theme: theme,
    namespace: 'pg_demo',
    nodes: [HorizontalRuleNode],
    onError: (error: Error) => {
      throw error;
    },
  };
</script>

<Composer {initialConfig}>
  <div class="editor-shell svelte-lexical">
    <MyToolbar />
    <div class="editor-container">
      <div class="editor-scroller">
        <div class="editor">
          <ContentEditable />
        </div>
      </div>
      <RichTextPlugin />
      <HorizontalRulePlugin />
    </div>
  </div>
</Composer>
```

--------------------------------

### Add Horizontal Rule Insert Control to Toolbar in Svelte Lexical

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/add-plugin.mdx

This Svelte code snippet illustrates how to add a control for inserting a horizontal rule to the Svelte Lexical editor's toolbar. It involves importing `InsertDropDown` and `InsertHRDropDownItem` and nesting the latter within the former in the `MyToolbar.svelte` component. This provides a user interface element for inserting the horizontal rule.

```svelte
// MyToolbar.svelte
<script lang="ts">
  import {
    BoldButton, Divider, ItalicButton, UnderlineButton, StrikethroughButton,
    FormatCodeButton, DropDownAlign, FontFamilyDropDown, FontSizeDropDown,
    Toolbar, InsertDropDown, InsertHRDropDownItem
  } from 'svelte-lexical';
</script>

<Toolbar>
  {#snippet children({editor, activeEditor, blockType})}={
    <FontFamilyDropDown />
    <FontSizeDropDown />
    <Divider />
    <BoldButton />
    <ItalicButton />
    <UnderlineButton />
    <StrikethroughButton />
    <FormatCodeButton />
    <Divider />
     <InsertDropDown>
       <InsertHRDropDownItem />
     </InsertDropDown>
    <DropDownAlign />
  }
  }
  </Toolbar>
```

--------------------------------

### Skip Decorator Rendering in Svelte-Lexical Node

Source: https://github.com/umaranis/svelte-lexical/blob/master/docs/decorator-node.md

This snippet demonstrates how to prevent a Svelte component, implemented as a Lexical Node, from using the DecoratorNode rendering mechanism. This is useful for nodes without mutable properties, allowing them to be rendered directly within the `createDOM` method. Note that Svelte context is not available to these components.

```javascript
static skipDecorateRender = true;
decorate() {
   return null;
}
```

--------------------------------

### Register and Unregister Editable Listener (JavaScript)

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/read-mode-edit-mode.mdx

Allows you to subscribe to changes in the editor's editable mode. The `registerEditableListener` function takes a callback that receives the new editable state. It returns a function to unregister the listener, preventing memory leaks when it's no longer needed.

```javascript
const removeEditableListener = editor.registerEditableListener(
  (isEditable) => {
    // The editor's mode is passed in!
    console.log(isEditable);
  },
);

// Do not forget to unregister the listener when no longer needed!
removeEditableListener();
```

--------------------------------

### Retrieve Editor Editable Mode (JavaScript)

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/read-mode-edit-mode.mdx

Retrieves the current editable state of the editor. This function returns a boolean value, `true` if the editor is currently editable, and `false` if it is in read-only mode. This is useful for conditional logic based on the editor's state.

```javascript
const isEditable = editor.isEditable();
```

--------------------------------

### Set Editor Editable Mode (JavaScript)

Source: https://github.com/umaranis/svelte-lexical/blob/master/packages/website/src/content/docs/guides/read-mode-edit-mode.mdx

Sets the editor to be editable or read-only. This is a core function for controlling user interaction with the editor content. It takes a boolean value where `true` enables editing and `false` disables it.

```javascript
editor.setEditable(true);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.