editor-elsolya

Rich Text Editor wrapped as a Web Component so it can work with any framework that supports NPM: React / Vue / Angular / Nuxt / Next / any Vanilla JS, etc.

The idea: you install one package:

npm i editor-elsolya

Then you use <editor-elsolya></editor-elsolya> anywhere.

✅ Key point: Why a Web Component?

• Works in any framework without creating a separate wrapper for each one.
• You can use it as a normal HTML element.
• Suitable for Nuxt/Next (keeping SSR in mind — see below).

Quick usage (Vanilla / any framework)

1) Import once (to register the custom element)

import "editor-elsolya";

Note for SSR (Next/Nuxt): importing editor-elsolya is safe on the server, but the editor element only registers/runs in the browser.

2) In your HTML / template

<editor-elsolya id="ed"></editor-elsolya>

3) Read/write content (HTML)

const ed = document.getElementById("ed") as any;

// set
ed.value = "<p>Hello</p>";

// get
console.log(ed.value);

// listen change
ed.addEventListener("change", (e: any) => {
  console.log("changed html:", e.detail.html);
});

React

Simplest way: use it directly as a custom element.

Method 1 (direct)

import "editor-elsolya";

export default function Page() {
  return <editor-elsolya />;
}

Next.js (SSR)

Use it client-side:

"use client";
import "editor-elsolya";

export default function Page() {
  return <editor-elsolya />;
}

Method 2 (ready adapter)

import { EditorElsolyaReact } from "editor-elsolya/react";

export default function Page() {
  return (
    <EditorElsolyaReact
      value="<p>Hello</p>"
      onChange={(html) => console.log(html)}
    />
  );
}

TypeScript note: if TS complains about the JSX element, add a small definition in global.d.ts:

declare namespace JSX {
  interface IntrinsicElements {
    "editor-elsolya": any;
  }
}

Vue 3 / Nuxt 3

Vue 3 (direct)

import "editor-elsolya";

Then:

<template>
  <editor-elsolya @change="onCh" />
</template>

<script setup lang="ts">
const onCh = (e:any) => console.log(e.detail.html);
</script>

Vue Adapter (v-model)

import { EditorElsolyaVue } from "editor-elsolya/vue";

<template>
  <EditorElsolyaVue v-model="html" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { EditorElsolyaVue } from "editor-elsolya/vue";

const html = ref("<p>Hello</p>");
</script>

Nuxt 3 (SSR)

In Nuxt, make it run client-only:

<template>
  <ClientOnly>
    <editor-elsolya />
  </ClientOnly>
</template>

Or create a client plugin: plugins/editor-elsolya.client.ts

import "editor-elsolya";
export default defineNuxtPlugin(() => {});

Angular

1. In main.ts:

import "editor-elsolya";

2. In app.module.ts (so Angular allows custom elements):

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

3. Use it in a template:

<editor-elsolya (change)="onChange($event)"></editor-elsolya>

API (brief)

• value: string → HTML الحالي (get/set)
• disabled: boolean → تعطيل/تفعيل التحرير
• Event: change → detail: { html: string }

The web component emits a DOM CustomEvent named change.

Development, build, and publish

Inside the project:

npm i
npm run build

To publish to npm:

npm publish --access public

Notes

• The editor is built on contenteditable + a toolbar (not CKEditor).
• If you need customizations (colors/buttons/image upload/...): send what you need and we can add it as options/attributes.