fouita / tailwind-editor Goto Github PK

Greetings,

Do you have any plans to support laravel?

Is "https://editor-tw.fouita.com/" stopped?
I'd like to see the website. ㅡ.ㅡ

I don't know if it's a bug of library. But it doesn't show editor tab in Firefox, when I select a text. But in Yandex Browser/Chrome it works well.

I am trying your WYSIWYG binding a textarea to the editor

<script>
	import Tailwindcss from './Tailwindcss.svelte';
	import Editor from 'tailwind-editor';
	
	let in_html = "";
	let out_html = ""

	$: arr_html = [
        {html: in_html, klass: ''}
	]
	
	// $: console.log(out_html)
</script>

<Tailwindcss />


<main class="p-4">
	<div class="flex">
		<div class="flex-1">
			<Editor bind:html={out_html} {arr_html}/>
		</div>
		<textarea class="flex-1" 
			value={out_html}
			on:change={e => {
				in_html = e.target.value;
			}}></textarea>
	</div>
</main>

My only issue with this aproach is that the klass is wrapping the textarea code in a div so for every change i make, the source is wrapped in another div.

If you could bring me a new aproach or make the use of klass optional i would be pleased

Hello,

first of all congrats on your work. I like that it keeps a clean html.

Here is what i've noticed. When I add a background color or bg-transparent or a text color, and then I change the color, the editor just adds the new class that i selected. Therefore it ends up having multiple text- or bg- classes, for example:

<span class="text-teal-600 text-white text-black text-red-400 bg-blue-500 bg-transparent">style</span>

if a text- class is selected it should delete all other text- classes. the same with the bg- class. in other words, there should be only one text- or bg- class at any given time.

cheers

After importing it into svelte 5 and doing some fixing based on the "Window is not defined" issue (Which needs to be fixed as well), there's an error in the console:

Error: Your application, or one of its dependencies, imported from 'svelte/internal', which was a private module used by Svelte 4 components that no longer exists in Svelte 5. It is not intended to be public API. If you're a library author and you used 'svelte/internal' deliberately, please raise an issue on https://github.com/sveltejs/svelte/issues detailing your use case.

Please remove the ability to install into Svelte5 or change the logic to support it.

Thanks.

ReferenceError: window is not defined
at \node_modules\tailwind-editor\src\index.js:1:14
at instantiateModule (/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:15)

What license is Tailwind Editor?

Thanks :)

Hello,
I'm trying to use this component in a SvelteKit app, but I'm encountering some css loading issues (see below).
I saw there is a demo repo for using this editor with Sapper, but I'm wondering if there are known issues with SvelteKit.
Here is what I've tried:

npm init svelte@next
npx svelte-add@latest tailwindcss
npm install
npm install -D tailwind-editor

But when I use the simple <Editor /> example given in the main page of this repo, I get lots of issues with tailwind styles not being properly loaded for the editor. Is there some special configuration I need to adjust to make it work for SvelteKit?

Hello,
I manage to make it wotk a bit (a bit) with svelkit but it not fully working properly

// +page.svelte
<script>
  import "../app.css"; // for tailwind
  import { onMount } from "svelte";
  let html = "";
  let Editor;
  let arr_html = [
    {
      html: 'Hello <span class="font-bold">world!</span>',
      klass: "p-2 text-3xl",
    },
  ];
  onMount(async () => {
    const module = await import("tailwind-editor");
    Editor = module.default;
  });
</script>

<div>
  {html}
</div>
<div class="flex">
  <svelte:component this={Editor} bind:html {arr_html} editable />
</div>

and this to don't run ssr

// +page.js
export const ssr = false;

and this is how the floating menu is displayed

it is working but it's not really usable :/

any help would be welcomed 😀

Best regards

Yohann

Hello,

I am having issues using your component :

As you can see in the image, the editing popup pops really far away from the content I desire to edit. Do you have an idea about how I can fix this ?

following is the implemented (revelent) code :
<div class="p-4 whitespace-pre-wrap"> <div class="relative flex"> <Editor bind:html={html} {arr_html} /> <div> {html} </div> </div> </div>

Thanks you !

EDIT : The problem seems to be that i have an element with the "relative" class higher in the DOM tree, conflicting with the positioning of the toolbar.

(￣︶￣*))

Hello,

Are there any plans to add table support?

TODO
[ ] embed media (image, video)
[ ] add lists
[ ] drag and drop positions
[ ] code highlighter with tailwindcss