WrkWrk

Rich text editor (WYSIWYG) written in Svelte, using MeltUI headless UI and tailwindcss CSS framework.

Built on top of tiptap editor(headless editor) and prosemirror. Easy to use, develop and maintain. A prompt engine that helps to integrate with any AI API, and enhance the writing experience.

Dark/Light theme is supported and customizable.

Getting started

Install

//npm
npm install @wrkwrk/svelte

//yarn
yarn add @wrkwrk/svelte

//pnmp
npm add @wrkwrk/svelte

Setup

Nexltint editor uses headless svelte components from MeltUI and styles it with tailwindcss. The theme tokens are inherited from Svelte Shadcn.

If you already have shadcn setup in your project then you can skip this part.

1. Install tailwindcss and postcss:

pnpm add -D tailwindcss postcss autoprefixer sass
npx tailwindcss init -p

Now tailwind.config.js and postcss.config.js are created

2. Configure tailwind.config.js:

// more detail at https://www.shadcn-svelte.com/docs/installation/manual

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{svelte,js}',
    './node_modules/@wrkwrk/svelte/dist/**/*.{svelte,ts}'
  ],
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border) / <alpha-value>)',
        input: 'hsl(var(--input) / <alpha-value>)',
        ring: 'hsl(var(--ring) / <alpha-value>)',
        background: 'hsl(var(--background) / <alpha-value>)',
        foreground: 'hsl(var(--foreground) / <alpha-value>)',
        primary: {
          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
        },
        muted: {
          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
        },
        accent: {
          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
        },
        popover: {
          DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
        },
        card: {
          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
          foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
        }
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)'
      },
      fontFamily: {
        sans: ['Inter']
      }
    }
  },
  plugins: []
};

Theme can customize via css tokens. The default token is located at EditorTheme.scss.

Usage:

To use the default theme, you need to wrap your SvelteEditor component with ThemeTheme:

<script lang="ts">
  import {SvelteEditor} from '@wrkwrk/svelte/EditorTheme';
  import EditorTheme from '@wrkwrk/svelte/EditorTheme';
</script>

<div class="editor">
  <EditorTheme>
    <SvelteEditor content="" placeholder="Start editing..." />
  </EditorTheme>
</div>

The EditorTheme basicaly just import the default theme we define in EditorTheme.scss:

<script lang="ts">
  import './EditorTheme.scss';
</script>

//EditorTheme.svelte

<slot />

Wrked editor uses wrkwrk/core, which is a headless editor with existing plugins installed, can be used in any UI framework, compatible with tiptap and prosemirror plugins system.

Wrked Svelte itself has some plugins completely written in Svelte and configurable

Features

Bubble Menu

Slash Menu

Image

Support upload/embed/unsplash api

AI prompt

Options

| Name | Type | Description | | :--------------------------------: | :---------------------: | :------------------------------------------------------ | | content | Content | Initialize editor content | | onChange | (editor:Editor)=>void | A callback will call when the editor change | | placeholder? | String | The placeholder will be displayed when the editor empty | | onCreated? | (editor:Editor)=>void | A callback will trigger once when the editor is created | | plugins? | PluginsOptions | Customize plugins options | | extensions? | Extensions | Customize editor extension |

content

Type: HTMLContent | JSONContent | JSONContent[] | null

Initialize content, can be a JSONContent or a html markup.

// Can be string
<SvelteEditor
  content="<p>this is a paragraph content</p>"
/>

// which is equal
<SvelteEditor
  ...
  content={{
    type:'docs'
    attrs:{},
    content:[{
      type:'paragraph',
      attrs:{},
      content:[{
        type:'text',
        text:'this is a paragraph content'
      }]
    }]
  }}
/>

placeholder

Type: String | undefined Default: undefined

Placeholder will display when editor content is empty

<SvelteEditor ... content="" placeholder="Press 'space' to trigger AI prompt" />

onChange

Type: (editor: Editor)=>void

The callback will fire when the editor changes ( update state or selection )

<script lang="ts">
  let editor;
</script>

<SvelteEditor
  ...
  onChange={_editor => {
    editor = _editor;
  }}
/>

onCreated

Type: (editor: Editor)=>void | undefined Default: undefined

The callback will fire once the editor finishes initialize

<SvelteEditor
  ...
  onCreated={editor => {
    console.log('The editor is created and ready to use !');
  }}
/>

plugins

Type: PluginOptions | undefined Default: undefined

type PluginOptions = {
  image?: ImagePluginOptions;
  gpt?: AskOptions;
  dropCursor?: DropcursorOptions;
  codeBlock?: WrkedCodeBlockOptions;
};

plugins.image

Type: ImagePluginOptions|undefined Default: undefined

Config the handleUpload function and setup API key to fetch images from unsplash

<SvelteEditor
      ...
      plugins={
        image: {
          handleUpload:(file)=>{
            // handle upload here
                const blob = new Blob([file]);
                const previewUrl = URL.createObjectURL(blob);
                return previewUrl;
          },
          unsplash: {
            accessKey: 'UNPLASH_API_KEY'
          }
        },
      }
/>

plugins.ask

Type:AskOptions|undefined Default: undefined

Trigger prompt in an empty line, get the question from the editor, call the handle function via this config and append the result to the editor. Allow to integrate with any AI out side the editor.

<SvelteEditor
  ...
  plugins={
    ask: async (question:string)=>{
      // config any AI tool to get the result and return
      // the result to the editor
      return 'result from any AI Backend'
    }
  }
/>

plugins.dropCursor

Type: DropcursorOptions|undefined Default: undefined

Config dropCursor color/width/class.

<SvelteEditor
  ...
  plugins={
    dropCursor: {
      width:'2px',
      color:'#000',
    }
  }
/>

plugins.codeBlock

Type: WrkwrkCodeBlockOptions|undefined

Default:

{
    themes: {
        dark: 'github-dark',
        light: 'github-light'
    },
    langs: []
}

The codeBlock theme will sync with the theme props.

https://github.com/nocsi/wrkwrk/assets/32099104/d5d5c72d-787d-4b16-882f-2cba0dbfaa35

  <SvelteEditor
    //....
    content={''}
    onChange={editor.set}
    theme="light"
    plugins={{
      codeBlock: {
        langs: ['c', 'sh', 'javascript', 'html', 'typescript'],
        themes: {
          dark: 'vitesse-dark',
          light: 'vitesse-light'
        }
      }
    }}
  />

Contributing

Please follow the contribute guideline

License

The MIT License (MIT). Please see License File for more information.