leksy-editor 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,173 @@
+# Leksy Editor
+
+Leksy Editor is an alternative to traditional WYSIWYG editors, designed primarily for creating mail templates, blogs, and documents without any content manipulation.
+
+## Features
+- Supports React, Vue, and Vanilla JavaScript applications.
+- Rich plugin system for extended functionalities.
+- Customizable CSS variables for multiple themes and modes.
+- Mention system with category-based labels.
+
+## Installation
+
+```sh
+npm install leksy-editor
+```
+
+## Usage
+
+### React Example
+
+```jsx
+import LeksyEditor from 'leksy-editor';
+import { useEffect, useRef } from 'react';
+
+function App() {
+  const editorRef = useRef(null);
+  const editor = useRef(null);
+
+  useEffect(() => {
+    editor.current = LeksyEditor.create(editorRef.current, {
+      plugins: [/* plugin list here */],
+      // Other options
+    });
+  }, []);
+
+  return <div ref={editorRef} />;
+}
+```
+
+### Vue Example
+
+```js
+import { createApp, ref, onMounted } from 'vue';
+import LeksyEditor from 'leksy-editor';
+
+const app = createApp({
+  setup() {
+    const editor = ref(null);
+
+    onMounted(() => {
+      const editorElement = document.getElementById('editor');
+      editor.value = LeksyEditor.create(editorElement, {
+        plugins: [/* plugin list here */],
+        // Other options
+      });
+    });
+
+    return { editor };
+  },
+  template: `<div id='editor'></div>`
+});
+```
+
+## Plugins
+
+| Plugin Group                  | Plugins |
+|--------------------------------|---------|
+| Basic Actions                 | `undo`, `redo` |
+| Text Formatting               | `bold`, `underline`, `italic`, `strike` |
+| Font Styling                  | `font`, `font-size` |
+| Subscript/Superscript         | `subscript`, `superscript` |
+| Colors                        | `font_color`, `highlight_color` |
+| Alignment                     | `align_justify`, `align_left`, `align_center`, `align_right` |
+| Lists                         | `ordered_list`, `unordered_list` |
+| Media                         | `image`, `video`, `table`, `attachment` |
+| Clipboard                     | `cut`, `copy`, `paste`, `select_all` |
+| Links                         | `link`, `unlink`, `embed` |
+| Text Styles                   | `format-block`, `text_style`, `line_height`, `paragraph_style` |
+| Indentation & Formatting      | `indent`, `outdent`, `horizontal_rule`, `remove_format` |
+| Extras                        | `emoji`, `mention` |
+| Third-Party Integrations      | `pexels`, `giphy`, `tenor` |
+| Utilities                     | `fullscreen`, `print`, `code_view` |
+
+## Configuration Options
+
+| Option | Description |
+|--------|-------------|
+| `classPrefix` | Custom class prefix for styling. |
+| `placeholder` | Placeholder text when the editor is empty. |
+| `plugins` | List of enabled plugins. |
+| `labels` | Labels for mentions and categories. |
+| `customPlugins` | Additional custom plugins. |
+| `spellcheck` | Enables/disables spellchecking. |
+| `closePluginOnClick` | Closes plugins when clicking outside. |
+| `value` | Initial value of the editor. |
+| `hideNavigation` | Hides the navigation toolbar. |
+| `giphyApiKey` | API key for Giphy integration. |
+| `pexelsApiKey` | API key for Pexels integration. |
+| `tenorApiKey` | API key for Tenor integration. |
+| `cssVariables` | Custom CSS styling variables for multiple themes and modes. |
+
+### CSS Customization
+
+```js
+cssVariables: {
+  primary: "hsl(12, 79.60%, 52.00%)",
+  midDarker: "hsl(103, 64.60%, 49.80%)",
+  baseWhite: "hsl(234, 70.90%, 61.00%)",
+  whiteDark: "hsl(223, 5%, 92%)",
+  resizer: "rgb(235, 28, 235)",
+  shadow: "rgba(20, 179, 54, 0.3)"
+}
+```
+
+### Labels (Mentions Fields)
+
+```js
+labels: [
+  {
+    name: 'Category 1',
+    category: 'CATEGORY_ONE',
+    fields: [
+      { value: 'CATEGORY_ONE.apple', name: 'Category 1 Apple' },
+      { value: 'CATEGORY_ONE.orange', name: 'Category 1 Orange' }
+    ]
+  },
+  {
+    name: 'Category 2',
+    category: 'CATEGORY_TWO',
+    fields: [
+      { value: 'CATEGORY_TWO.name', name: 'Category 2 Apple' },
+      { value: 'CATEGORY_TWO.firstName', name: 'Category 2 Orange' }
+    ]
+  }
+]
+```
+
+### Giphy Integration Example
+
+Leksy Editor supports Giphy integration for inserting GIFs.
+
+```js
+import LeksyEditor from 'leksy-editor';
+
+const editor = LeksyEditor.create(document.getElementById('editor'), {
+  plugins: ['giphy'],
+  giphyApiKey: 'YOUR_GIPHY_API_KEY' // Replace with your actual API key
+});
+```
+
+Similarly, Pexels and Tenor can be integrated using `pexels` and `tenor` plugins along with their respective API keys.
+
+## Functions
+
+| Function | Description |
+|----------|-------------|
+| `setContents(html)` | Sets the editor's content. |
+| `getContents()` | Returns the current HTML content of the editor. |
+| `onChange(html)` | Triggered when content changes. |
+| `onBlur(html)` | Triggered when the editor loses focus. |
+| `onAttachment(files)` | Fires when files are attached. |
+| `manipulateImage()` | Custom function for manipulating images. |
+| `uploadVideo(file)` | Handles video uploads, returns a promise with video URL. |
+| `focus()` | Focuses the editor. |
+| `getCore()` | Returns the core editor instance. |
+
+## License
+
+MIT License. Free to use and modify.
+
+## Author
+
+Leksy Editor is developed and maintained by **Agami Technologies**.