unable to make it work

[jdgaravito]

hi, I have a problem: i get this error when I try to yarn dev:

rollup v1.21.2
bundles src/main.js → public/bundle.js...
[!] (plugin svelte) ParseError: Expected valid tag name
node_modules/cl-editor/src/Editor.html
1: <:Window on:click="_documentClick(event)" />
    ^
2: <div class="cl" ref:editorWrapper>
3:   <div class="cl-actionbar">      
ParseError: Expected valid tag name
    at error$1 (/mnt/c/Users/jdgar/Github/Bitagora/bitagora_frontend/node_modules/svelte/src/compiler/utils/error.ts:25:16)
    at Parser$2.error (/mnt/c/Users/jdgar/Github/Bitagora/bitagora_frontend/node_modules/svelte/src/compiler/parse/index.ts:93:3)
    at read_tag_name (/mnt/c/Users/jdgar/Github/Bitagora/bitagora_frontend/node_modules/svelte/src/compiler/parse/state/tag.ts:281:10)     
    at tag (/mnt/c/Users/jdgar/Github/Bitagora/bitagora_frontend/node_modules/svelte/src/compiler/parse/state/tag.ts:76:15)
    at new Parser$2 (/mnt/c/Users/jdgar/Github/Bitagora/bitagora_frontend/node_modules/svelte/src/compiler/parse/index.ts:45:12)
    at parse$1 (/mnt/c/Users/jdgar/Github/Bitagora/bitagora_frontend/node_modules/svelte/src/compiler/parse/index.ts:208:17)
    at parse (/mnt/c/Users/jdgar/Github/Bitagora/bitagora_frontend/node_modules/svelte/src/compiler/compile/index.ts:68:14)
    at preprocessPromise.then.code (/mnt/c/Users/jdgar/Github/Bitagora/bitagora_frontend/node_modules/rollup-plugin-svelte/index.js:252:22)

do I need to install typescript on svelte? or is not required from scratch.

i just added to App.svelte

<script>import Editor from "cl-editor";
const editor = new Editor({
    target: document.getElementById("editor")
  });
</script>

<div id="editor"></div>

thank you

[pkid169]

If you are going to do it within a Svelte component (as per your current code), you'll need to do it onMount() as the target param expects a rendered HTML element. Otherwise you will have to move <div id="editor"></div> out of your Svelte app and have it rendered in the "regular" way (just html emitted by your backend) so by the time Svelte kicks in the element is there.

[mylastore]

did not work for me I am using it on a sapper app with svelte 3.0.0 and getting this error

Expected valid tag name
1: <:Window on:click="_documentClick(event)" />
    ^
2: <div class="cl" ref:editorWrapper>
3:   <div class="cl-actionbar">

[mylastore]

Not sure if this is correct but when I import it like this it works import Editor from 'cl-editor/dist'

[mylastore]

I am trying it on my svelte setup with out Sapper and getting this error I could see the text editor ok but get error below and I just copy your example setup

// Initialize editor
const editor = new Editor({
    // <HTMLElement> required
    target: document.getElementById('editor'),
    // optional
    props: {
        // <Array[string | Object]> string if overwriting, object if customizing/creating
        // available actions:
        // 'viewHtml', 'undo', 'redo', 'b', 'i', 'u', 'strike', 'sup', 'sub', 'h1', 'h2', 'p', 'blockquote', 
        // 'ol', 'ul', 'hr', 'left', 'right', 'center', 'justify', 'a', 'image', 'forecolor', 'backcolor', 'removeFormat'
        actions: [
            'b', 'i', 'u', 'strike', 'ul', 'ol',
            {
                name: 'copy', // required
                icon: '<b>C</b>', // string or html string (ex. <svg>...</svg>)
                title: 'Copy',
                result: () => {
                    // copy current selection or whole editor content
                    const selection = window.getSelection();
                    if (!selection.toString().length) {
                        const range = document.createRange();
                        range.selectNodeContents(editor.refs.editor);
                        selection.removeAllRanges();
                        selection.addRange(range);
                    }
                    editor.exec('copy');
                }
            },
            'h1', 'h2', 'p'
        ],
        // default 300px
        height: '300px',
        // initial html
        html: '',
        // remove format action clears formatting, but also removes some html tags.
        // you can specify which tags you want to be removed.
        removeFormatTags: ['h1', 'h2', 'blackquote'] // default
    }
})

// Events
editor.on('change', (html) => console.log(html)) // on every keyup event
editor.on('blur', (event) => console.log(event)) // on editor blur event

TypeError: editor.on is not a function

[mylastore]

I figure this out I guess the example calling the "Events" need to be updated to this Is missing the "$"

// Events
editor.$on('change', (html) => console.log(html)) // on every keyup event
editor.$on('blur', (event) => console.log(event)) // on editor blur event

[findelallc]

is there any way to append html at the end of user's last cursor, as of now every time I do setHtml, it actually not appending, it's overriding the existing content

As for example: (consoled output through editor.$on('change') API)

we are writting a new &nbsp;**<span data-time="sadasd" data-progress="atttt" class="btn-aa d-inline">method** about our work**</span>**

here the star marked one is my inserted html through sethtml and you can see about our work this I have written in the editor which is appending to the programmatic tag part. which raises the issue.

[nenadpnc]

Currently not supported. What you can do is, whenever you need to append some text/html, first getHtml, find current cursor position, set or append new text/html in that position and call setHtml method. You can use saveRange() and restoreRange() to make sure user focus is not lost.