@tanglemedia/svelte-starter-tiptap-editor

The TipTap-Editor package is responsible for building a WYSIWYG editor with help of the core libraries of TipTap extensions, as well as having custom blocks to connect with the collections of flexible_nodes_xxxx from Directus, if you choose to do so.

Simple Example usage:

<script>
  import { TipTapEditor } from '@tanglemedia/svelte-starter-tiptap-editor';
  let editorJSON = {};
  let editorHTML = '';
</script>

<div class="w-full pl-10 pr-16 py-10 grid grid-cols-1 gap-4">
	<TipTapEditor
		mode="write"
		defaultContent="Hello World!"
		on:editor={(e) => {
			editorJSON = e.detail?.getJSON();
			editorHTML = e.detail?.getHTML();
		}}
	/>
	<hr />
	{JSON.stringify(editorJSON)}
	<hr />
	<p>{@html editorHTML}</p>
</div>

Update the tailwind.config.cjs/ts file from your root project folder to let the Tailwind CSS compiler know where to look for the utility classe.

Example of a tailwind.config.cjs/ts file:

import { customTheme } from './src/boot/theme';

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,svelte,ts}',
    './src/config/**/*.{yml,yaml,json}',
    './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}',
    './node_modules/@tanglemedia/svelte-starter-auth/dist/**/*.{svelte,ts}',
    './node_modules/@tanglemedia/svelte-starter-layout/dist/**/*.{svelte,ts}',
    './node_modules/@tanglemedia/svelte-starter-tiptap-editor/dist/**/*.{svelte,ts}' // tiptap-editor utilities classes
  ],
  theme: {
    extend: {
      fontFamily: {
        primary:
          '"Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto',
        accent: '"Poppins", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif'
      },
      textColor: {
        primary: customTheme.colors.primary,
        accent: customTheme.colors.accent
      },
      backgroundColor: {
        primary: customTheme.colors.primary,
        accent: customTheme.colors.accent
      },
      borderColor: {
        primary: customTheme.colors.primary,
        accent: customTheme.colors.accent
      },
      ringColor: {
        primary: customTheme.colors.primary,
        accent: customTheme.colors.accent
      }
    }
  },
  plugins: [require('flowbite/plugin')]
};