tulih-editor 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Hendra Randy Nomura
+
+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,331 @@
+# TulihEditor
+
+A lightweight, **zero-runtime-dependency** WYSIWYG rich text editor for the browser,
+built on `contenteditable` and `document.execCommand()`. Written in **TypeScript**, it
+ships a modular plugin system with **47 built-in plugins** and ships its own CSS — no
+Bootstrap or CSS framework required on your page.
+
+- 🧩 **Plugin architecture** — every feature is a self-contained plugin
+- 🪶 **Tiny & dependency-free** — ~36 KB gzipped, no runtime dependencies
+- 🎨 **Self-contained styling** — works without Bootstrap; icons via Tabler Icons (auto-loaded)
+- 🔒 **Built-in HTML sanitizer** — configurable allowed tags/attributes, URL scheme allow-lists, iframe domain allow-list
+- 📦 **ESM + UMD builds** — `import` it or drop a `<script>` tag
+- ⌨️ **TypeScript-first** — full type definitions for the API and the plugin contract
+
+> Ported to a standalone package from the original implementation that lived inside a
+> Laravel app. The runtime behavior is identical; this repo is the framework-agnostic,
+> open-source distribution.
+
+## Installation
+
+```bash
+npm install tulih-editor
+```
+
+```js
+import TulihEditor from 'tulih-editor';
+import 'tulih-editor/style.css';
+```
+
+Or via a `<script>` tag (UMD global `TulihEditor`):
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/tulih-editor/dist/tulih-editor.css">
+<script src="https://unpkg.com/tulih-editor/dist/tulih-editor.umd.js"></script>
+```
+
+The toolbar icons use [Tabler Icons](https://tabler.io/icons); the webfont (pinned to the
+`v3` line) is loaded automatically from jsDelivr on first use, only if a `tabler-icons`
+stylesheet is not already present on the page. To self-host instead, add your own
+`tabler-icons` stylesheet to the page before TulihEditor loads — the auto-loader will
+detect it and skip the CDN request.
+
+## Basic usage
+
+```html
+<textarea data-tulih-editor>Initial content here</textarea>
+```
+
+The editor auto-attaches to every `<textarea data-tulih-editor>` on `DOMContentLoaded`.
+
+### Manual initialization
+
+```ts
+const editor = TulihEditor.attach('#my-textarea', {
+  height: 500,
+  features: {
+    table: false,
+    source: false,
+  },
+});
+
+editor.getContent();    // get HTML
+editor.setContent('<p>New content</p>');
+editor.getText();       // get plain text
+editor.getWordCount();  // number of words
+editor.getCharCount();  // number of characters
+editor.setReadOnly(true);
+editor.isReadOnly();
+editor.destroy();       // remove editor, restore the textarea
+```
+
+## Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `features` | `object` | all `true` | Enable/disable individual features (plugins) |
+| `minimal` | `boolean` | `false` | Hide the classic toolbar; floating toolbar only |
+| `toolbar` | `string[][]` | auto | Custom toolbar layout (groups of plugin names) |
+| `height` | `number \| string` | `300px` | Editor body height (a number = pixels) |
+| `sanitize` | `object` | — | Custom HTML sanitization rules |
+| `allowedUrlSchemes` | `string[]` | `http, https, mailto, tel` | Allowed URL schemes for links |
+| `allowedImageSchemes` | `string[]` | `http, https, data` | Allowed URL schemes for images |
+| `iframeAllowlist` | `string[]` | youtube.com, vimeo.com, … | Allowed iframe domains |
+| `iframeSandbox` | `string` | `allow-scripts allow-same-origin allow-presentation` | `sandbox` attr for embeds |
+| `iframeAllow` | `string` | `accelerometer; autoplay; …` | `allow` attr for embeds |
+| `readOnly` | `boolean` | `false` | Start in read-only mode |
+
+### Custom toolbar layout
+
+```ts
+TulihEditor.attach('textarea', {
+  toolbar: [
+    ['inline', 'inlineCode', 'subSuper', 'removeFormat'],
+    ['block', 'align', 'colors', 'tableBg'],
+    ['link', 'image', 'iframe', 'table', 'hr', 'emoji'],
+    ['pastePlain', 'findReplace', 'indent', 'direction', 'unlink'],
+    ['source', 'history', 'fullscreen', 'readOnly'],
+  ],
+});
+```
+
+Each inner array is one toolbar group (separated by a divider). Plugin names not listed
+are hidden.
+
+### Image upload handler
+
+```ts
+TulihEditor.onUploadImage = (file, callback) => {
+  const formData = new FormData();
+  formData.append('image', file);
+  fetch('/upload', { method: 'POST', body: formData })
+    .then((r) => r.json())
+    .then((data) => callback(data.url));
+};
+```
+
+Used for both **drag & drop** and **paste image** from the clipboard. If no handler is set,
+images are inlined as `data:` URLs.
+
+### Image browse handler
+
+```ts
+TulihEditor.setBrowseImage((context, callback) => {
+  FileManager.open((url) => callback(url));
+});
+```
+
+## Feature toggles
+
+Each plugin can be disabled via `features`. In **normal mode** all features are enabled by
+default. Set `minimal: true` to hide the classic toolbar — in minimal mode only the
+floating toolbar is active and other features are off by default:
+
+```ts
+TulihEditor.attach('textarea', { minimal: true });
+// opt specific features back in:
+TulihEditor.attach('textarea', { minimal: true, features: { statusBar: true } });
+```
+
+```ts
+TulihEditor.attach('textarea', {
+  features: {
+    block: false,    // hide heading/block select
+    link: false,     // hide link button
+    emoji: false,    // hide emoji picker
+    darkMode: false, // hide dark-mode toggle
+  },
+});
+```
+
+## All plugins
+
+| Plugin | Order | Toolbar | Description |
+|--------|-------|---------|-------------|
+| `autoLinkify` | 1 | — | Auto-convert typed/pasted URLs into clickable links |
+| `mediaEmbed` | 2 | — | Auto-convert YouTube/Vimeo URL to embed |
+| `dragDrop` | 3 | — | Drag & drop image files into the editor |
+| `linkTooltip` | 4 | — | Hover tooltip showing link URL |
+| `keyboardShortcuts` | 5 | — | Customizable Ctrl+B/I/U/Z/Y/S/K shortcuts |
+| `markdown` | 5 | — | Markdown shortcuts (`# `, `- `, `> `, `1. `) |
+| `emojiAutocomplete` | 6 | — | Type `:` then letters for emoji suggestions |
+| `shortcutCustomizer` | 6 | Button | Modal UI to customize keyboard shortcuts |
+| `block` | 10 | Select | Block format: Paragraph, H1–H6, Quote, Code |
+| `inline` | 20 | Buttons | Bold, Italic, Underline, Strikethrough, quote |
+| `pre` | 21 | Button | Insert preformatted text |
+| `inlineCode` | 22 | Button | Wrap selection in `<code>` |
+| `codeBlock` | 23 | Button | Insert code block (16 languages) |
+| `pastePlain` | 24 | Button | Toggle paste-as-plain-text |
+| `indent` | 25 | Buttons | Indent / Outdent |
+| `list` | 25 | Selects | Ordered/unordered list styles |
+| `subSuper` | 26 | Buttons | Subscript / Superscript |
+| `lineHeight` | 26 | Select | Line height 1–3 |
+| `fontSize` | 27 | Select | Font size 8px–72px |
+| `fontFamily` | 28 | Select | Font family (11 fonts) |
+| `specialChars` | 29 | Button | Special characters popup (~280 symbols) |
+| `colors` | 30 | Color inputs | Text color / Background color |
+| `findReplace` | 31 | Button | Find & replace popup |
+| `caseTransform` | 31 | Button | UPPER / lower / Title / Sentence case |
+| `align` | 40 | Buttons | Left, Center, Right, Justify |
+| `link` | 50 | Button + Modal | Link insertion; inline edit on click |
+| `image` | 51 | Button + Modal | Image insertion with URL or browse |
+| `imageProps` | 52 | Modal (dblclick) | Image properties: size, alt, class, CSS |
+| `iframe` | 53 | Button + Modal | Iframe embed with sandbox/allow |
+| `table` | 54 | Button + Grid | Table insertion (10×10 grid) + properties |
+| `hr` | 55 | Button | Horizontal rule with style popup |
+| `tableTools` | 55 | Floating bar | Rows/cols, merge, header, caption, cell bg, valign |
+| `tableBg` | 56 | Color input | Table cell background color |
+| `imageTools` | 56 | Floating bar | Resize handles, border, rounded corners |
+| `unlink` | 58 | Button | Remove link from selection |
+| `floatingToolbar` | 58 | — | Mini toolbar near a text selection |
+| `darkMode` | 59 | Button | Toggle dark mode |
+| `emoji` | 60 | Button + Popup | Emoji picker grid with search |
+| `direction` | 61 | Buttons | LTR / RTL text direction |
+| `source` | 65 | Button | Toggle source (HTML) mode |
+| `history` | 70 | Buttons | Undo / Redo |
+| `readOnly` | 75 | Button | Toggle read-only mode |
+| `fullscreen` | 75 | Button | Toggle fullscreen |
+| `shortcutsHelp` | 90 | Button | Keyboard shortcuts reference |
+| `statusBar` | 100 | Status bar | Live tag indicator, word/char count, autosave badge |
+| `autosave` | 210 | — | Auto-save to localStorage with Saved/Unsaved badge |
+| `toolbarCollapse` | 1000 | Button | Collapse/expand the toolbar |
+
+## Keyboard shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| Ctrl+B | Bold |
+| Ctrl+I | Italic |
+| Ctrl+U | Underline |
+| Ctrl+S | Strikethrough |
+| Ctrl+Z | Undo |
+| Ctrl+Shift+Z / Ctrl+Y | Redo |
+| Ctrl+K | Open link dialog |
+
+Shortcuts can be rebound via the **shortcut customizer** button, or programmatically:
+
+```js
+localStorage.setItem('te-shortcut-bold', JSON.stringify({ key: 'b', ctrl: true, shift: false }));
+```
+
+Each key follows the format `te-shortcut-{action}`.
+
+## Plugin system
+
+Every feature is a plugin implementing the `Plugin` interface:
+
+```ts
+import type { Plugin, PluginContext } from 'tulih-editor';
+
+const myPlugin: Plugin = {
+  name: 'myPlugin',          // unique name (also the feature flag key)
+  order: 45,                 // toolbar position (divider per 10-range)
+  deps: ['link'],            // optional dependencies
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" data-cmd="myCmd">My</button>',
+  modalHTML: '<div class="te-modal">…</div>',   // optional
+  css: '.te-my { color: red; }',                // optional, injected once
+  init(ctx: PluginContext) {
+    const btn = ctx.wrapper.querySelector('[data-cmd="myCmd"]');
+    btn?.addEventListener('click', () => { /* … */ });
+  },
+  destroy(ctx: PluginContext) { /* cleanup */ },
+};
+
+export default myPlugin;
+```
+
+### The plugin context (`ctx`)
+
+| Property | Description |
+|----------|-------------|
+| `wrapper` | Wrapper element |
+| `editor` | Contenteditable body (`.te-editor`) |
+| `toolbar` | Toolbar element |
+| `textarea` | Original textarea |
+| `features` | Resolved feature flags |
+| `options` | Resolved options |
+| `utils` | `sanitizeHTML`, `isSafeUrl`, `isAllowedIframeUrl` |
+| `TulihEditor` | The global TulihEditor object |
+| `saveSel()` / `restoreSel()` | Save / restore the selection range |
+| `updateActiveStates()` | Refresh toolbar active states |
+
+### Registering a custom plugin
+
+```ts
+import TulihEditor from 'tulih-editor';
+import myPlugin from './myPlugin';
+
+TulihEditor.pluginManager.register('myPlugin', myPlugin);
+
+TulihEditor.attach('textarea', { features: { myPlugin: true } });
+```
+
+## Project structure
+
+```
+tulih-editor/
+├── src/
+│   ├── index.ts              # entry point + public API
+│   ├── types.ts              # public TypeScript types
+│   ├── styles/
+│   │   ├── base.css          # framework-free primitives (buttons/forms/grid)
+│   │   ├── editor.css        # editor theme + layout
+│   │   └── index.css         # stylesheet entry (imported by index.ts)
+│   ├── core/
+│   │   ├── Editor.ts         # editor instance (class)
+│   │   ├── PluginManager.ts  # plugin registry & lifecycle
+│   │   └── helpers.ts        # shared DOM utilities
+│   └── plugins/
+│       ├── index.ts          # registers the 47 default plugins
+│       └── *.ts              # one file per plugin
+├── test/                     # jsdom end-to-end tests
+└── dist/                     # build output (gitignored)
+```
+
+## Development
+
+```bash
+npm install
+npm run dev        # Vite dev server (see examples/)
+npm run typecheck  # tsc --noEmit
+npm run build      # ESM + UMD bundles, CSS, and .d.ts declarations
+npm test           # jsdom end-to-end tests (run after build)
+```
+
+Build output (`dist/`):
+
+```
+tulih-editor.es.js     # ESM bundle
+tulih-editor.umd.js    # UMD bundle (global: TulihEditor)
+tulih-editor.css       # stylesheet (base + theme)
+types/                 # .d.ts declarations
+```
+
+## Browser support
+
+Modern evergreen browsers (Chrome, Firefox, Safari, Edge).
+
+## Credits
+
+- Toolbar icons: [Tabler Icons](https://tabler.io/icons) by Paweł Kuna — licensed under
+  [MIT](https://github.com/tabler/tabler-icons/blob/main/LICENSE). The webfont is referenced
+  from a CDN at runtime and is **not** bundled or redistributed by this package. If you
+  choose to self-host/bundle the Tabler webfont, include its MIT license notice alongside it.
+
+## Contributing
+
+Contributions are welcome — see [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## License
+
+[MIT](LICENSE) © Hendra Randy Nomura

package/dist/tulih-editor.css

@@ -0,0 +1 @@
+:where(.te-container,.te-float-toolbar,.te-float-link-input,.te-link-tools,.te-link-edit-popup,.te-image-tools,.te-table-tools,.te-hr-popup,.te-fr-popup,.te-emoji-popup,.te-sc-popup,.te-codeblock-popup) .btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-family:inherit;font-size:1rem;font-weight:400;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;padding:.375rem .75rem;border:1px solid transparent;border-radius:.375rem;background-color:transparent;color:#212529;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}:where(.te-container,.te-float-toolbar,.te-float-link-input,.te-link-tools,.te-link-edit-popup,.te-image-tools,.te-table-tools,.te-hr-popup,.te-fr-popup,.te-emoji-popup,.te-sc-popup,.te-codeblock-popup) .btn:focus-visible{outline:2px solid rgba(26,26,26,.35);outline-offset:1px}:where(.te-container,.te-float-toolbar,.te-float-link-input,.te-link-tools,.te-link-edit-popup,.te-image-tools,.te-table-tools,.te-hr-popup,.te-fr-popup,.te-emoji-popup,.te-sc-popup,.te-codeblock-popup) .btn:disabled,:where(.te-container,.te-float-toolbar,.te-float-link-input,.te-link-tools,.te-link-edit-popup,.te-image-tools,.te-table-tools,.te-hr-popup,.te-fr-popup,.te-emoji-popup,.te-sc-popup,.te-codeblock-popup) .btn[disabled]{opacity:.5;pointer-events:none}:where(.te-container,.te-float-toolbar,.te-float-link-input,.te-link-tools,.te-link-edit-popup,.te-image-tools,.te-table-tools,.te-hr-popup,.te-fr-popup,.te-emoji-popup,.te-sc-popup,.te-codeblock-popup) .btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.25rem}:where(.te-container,.te-float-toolbar,.te-link-tools,.te-link-edit-popup,.te-image-tools,.te-table-tools,.te-hr-popup,.te-fr-popup,.te-emoji-popup,.te-sc-popup,.te-codeblock-popup) .btn-light{color:#3a3a3a;background-color:#f8f9fa;border-color:transparent}:where(.te-container,.te-float-toolbar,.te-link-tools,.te-link-edit-popup,.te-image-tools,.te-table-tools,.te-hr-popup,.te-fr-popup,.te-emoji-popup,.te-sc-popup,.te-codeblock-popup) .btn-light:hover{background-color:#f2ede2}:where(.te-container,.te-link-tools,.te-link-edit-popup,.te-hr-popup,.te-fr-popup,.te-codeblock-popup,.te-table-tools) .btn-primary{color:#fff;background-color:#1a1a1a;border-color:#1a1a1a}:where(.te-container,.te-link-tools,.te-link-edit-popup,.te-hr-popup,.te-fr-popup,.te-codeblock-popup,.te-table-tools) .btn-primary:hover{background-color:#333;border-color:#333}:where(.te-container,.te-link-tools,.te-link-edit-popup,.te-hr-popup,.te-fr-popup,.te-codeblock-popup,.te-table-tools) .btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}:where(.te-container,.te-link-tools,.te-link-edit-popup,.te-hr-popup,.te-fr-popup,.te-codeblock-popup,.te-table-tools) .btn-secondary:hover{background-color:#5c636a;border-color:#565e64}:where(.te-container,.te-link-tools,.te-link-edit-popup,.te-image-tools,.te-table-tools,.te-hr-popup,.te-fr-popup,.te-codeblock-popup) .btn-outline-secondary{color:#3a3a3a;border-color:#dee2e6}:where(.te-container,.te-link-tools,.te-link-edit-popup,.te-image-tools,.te-table-tools,.te-hr-popup,.te-fr-popup,.te-codeblock-popup) .btn-outline-secondary:hover{background-color:#f2ede2;border-color:#ccc}:where(.te-container,.te-link-tools,.te-link-edit-popup,.te-image-tools,.te-table-tools,.te-hr-popup,.te-fr-popup,.te-codeblock-popup) .btn-outline-danger{color:#c1272d;border-color:#c1272d}:where(.te-container,.te-link-tools,.te-link-edit-popup,.te-image-tools,.te-table-tools,.te-hr-popup,.te-fr-popup,.te-codeblock-popup) .btn-outline-danger:hover{background-color:#c1272d;color:#fff}:where(.te-container,.te-link-tools,.te-link-edit-popup,.te-image-tools,.te-table-tools,.te-hr-popup,.te-fr-popup,.te-codeblock-popup) .btn-outline-primary{color:#e8a317;border-color:#e8a317}:where(.te-container,.te-link-tools,.te-link-edit-popup,.te-image-tools,.te-table-tools,.te-hr-popup,.te-fr-popup,.te-codeblock-popup) .btn-outline-primary:hover{background-color:#e8a317;color:#fff}:where(.te-container) .btn-close{box-sizing:content-box;width:1em;height:1em;padding:.25em;border:0;border-radius:.375rem;background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;cursor:pointer;opacity:.5}:where(.te-container) .btn-close:hover{opacity:.8}:where(.te-container,.te-fr-popup,.te-hr-popup,.te-codeblock-popup,.te-float-link-input,.te-link-edit-popup) .form-control,:where(.te-container,.te-fr-popup,.te-hr-popup,.te-codeblock-popup,.te-float-link-input,.te-link-edit-popup) .form-select{display:block;width:100%;padding:.375rem .75rem;font-family:inherit;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;border:1px solid #ced4da;border-radius:.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}:where(.te-container,.te-fr-popup,.te-hr-popup,.te-codeblock-popup,.te-float-link-input,.te-link-edit-popup) .form-control:focus,:where(.te-container,.te-fr-popup,.te-hr-popup,.te-codeblock-popup,.te-float-link-input,.te-link-edit-popup) .form-select:focus{outline:0;border-color:#86b7fe;box-shadow:0 0 0 .2rem #0d6efd33}:where(.te-container,.te-fr-popup,.te-hr-popup,.te-codeblock-popup) .form-select{padding-right:2.25rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px}:where(.te-container,.te-fr-popup,.te-hr-popup,.te-codeblock-popup) .form-control-sm,:where(.te-container,.te-fr-popup,.te-hr-popup,.te-codeblock-popup) .form-select-sm{min-height:calc(1.5em + .5rem + 2px);padding:.25rem .5rem;font-size:.875rem;border-radius:.25rem}:where(.te-container,.te-fr-popup,.te-hr-popup,.te-codeblock-popup) .form-select-sm{padding-right:2rem}:where(.te-container,.te-hr-popup) .form-control-color{width:3rem;height:calc(1.5em + .75rem + 2px);padding:.25rem}:where(.te-container) .form-label{display:inline-block;margin-bottom:.5rem;font-size:.9rem;font-weight:500;color:#212529}:where(.te-container) .form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}:where(.te-container) .form-check-input{width:1em;height:1em;margin-top:.25em;margin-left:-1.5em;vertical-align:top;background-color:#fff;border:1px solid rgba(0,0,0,.25);border-radius:.25em;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}:where(.te-container) .form-check-input:checked{background-color:#1a1a1a;border-color:#1a1a1a;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:contain}:where(.te-container) .form-check-label{cursor:pointer}:where(.te-container) .row{display:flex;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}:where(.te-container) .row>.col,:where(.te-container) .row>[class^=col-],:where(.te-container) .row>[class*=" col-"]{flex:1 0 0%;padding-right:.5rem;padding-left:.5rem}:where(.te-container) .col-6{flex:0 0 auto;width:50%}:where(.te-container) .col-4{flex:0 0 auto;width:33.3333%}:where(.te-container) .col-3{flex:0 0 auto;width:25%}:where(.te-container) .g-2{gap:.5rem 0}:where(.te-container) .mb-0{margin-bottom:0!important}:where(.te-container) .mb-2{margin-bottom:.5rem!important}:where(.te-container) .mb-3{margin-bottom:1rem!important}:where(.te-container) .mt-2{margin-top:.5rem!important}:where(.te-container) .mt-3{margin-top:1rem!important}:where(.te-container) .small{font-size:.875em}:where(.te-container) .w-100{width:100%!important}:where(.te-container) .d-block{display:block!important}:where(.te-container) .d-flex{display:flex!important}:where(.te-container) .text-muted{color:#6c757d!important}.te-container{max-width:900px;position:relative}.te-toolbar{display:flex;flex-wrap:wrap;gap:6px;border:1px solid #dee2e6;background:#fbf9f4;padding:8px;border-bottom:none;border-radius:.375rem .375rem 0 0}.te-toolbar .btn,.te-toolbar .btn-light{color:#3a3a3a;background:transparent;border-color:transparent}.te-toolbar .btn:hover,.te-toolbar .btn-light:hover{background:#f2ede2}.te-toolbar .btn.active,.te-toolbar .btn-light.active{background:#fbead6;border-color:#fbead6}.te-toolbar .btn-outline-secondary{color:#3a3a3a;border-color:#dee2e6}.te-toolbar select{touch-action:manipulation}.te-dropdown-icon{display:inline-flex;align-items:center;vertical-align:middle;margin-right:2px}.te-dropdown-icon svg{width:18px;height:18px;stroke-width:2}.te-dropdown-icon-text{font-size:13px;font-weight:600;line-height:1;color:#3a3a3a}.te-toolbar .btn-primary,.te-toolbar .btn.btn-primary{background:#1a1a1a;border-color:#1a1a1a;color:#fff}.te-toolbar .btn-primary:hover,.te-toolbar .btn.btn-primary:hover{background:#333;border-color:#333}.te-toolbar .btn-outline-danger,.te-toolbar .btn.btn-outline-danger{color:#c1272d;border-color:#c1272d}.te-toolbar .btn-outline-danger:hover,.te-toolbar .btn.btn-outline-danger:hover{background:#c1272d;color:#fff}.te-toolbar .btn-outline-primary,.te-toolbar .btn.btn-outline-primary{color:#e8a317;border-color:#e8a317}.te-toolbar .btn-outline-primary:hover,.te-toolbar .btn.btn-outline-primary:hover{background:#e8a317;color:#fff}.te-divider{width:1px;background:#dee2e6;align-self:stretch;margin:0 4px}.te-editor{height:300px;overflow:auto;border:1px solid #dee2e6;border-radius:0;padding:12px;background:#fff}.te-editor:focus{outline:none;box-shadow:inset 0 0 0 2px #0d6efd40}.te-toolbar .btn .ti{pointer-events:none}.te-editor[placeholder]:empty:before{content:attr(placeholder);color:#6c757d}.te-toolbar select.form-select{width:auto;padding-right:2rem}.te-status{color:#6c757d;font-size:.875rem}@keyframes te-modal-in{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes te-backdrop-in{0%{opacity:0}to{opacity:1}}.te-modal{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;z-index:2500;overflow-y:auto;padding:1rem}.te-modal.is-open{display:flex}.te-modal.is-open .te-modal-dialog{animation:te-modal-in .2s ease-out}.te-modal.is-open .te-modal-backdrop{animation:te-backdrop-in .2s ease-out}.te-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0006}.te-modal-dialog{position:relative;background:#fff;border-radius:.75rem;box-shadow:0 20px 60px #0000002e;width:540px;max-width:100%;overflow:hidden;z-index:1}.te-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:#fbf9f4;border-bottom:1px solid #eee}.te-modal-header .te-modal-title{font-size:1.05rem;font-weight:600;color:#1a1a1a}.te-modal-header .btn-close{font-size:.85rem;opacity:.5;transition:opacity .15s}.te-modal-header .btn-close:hover{opacity:.8}.te-modal-body{padding:1.25rem;color:#212529;max-height:60vh;overflow-y:auto}.te-modal-footer{display:flex;gap:.5rem;justify-content:flex-end;padding:1rem 1.25rem;background:#fbf9f4;border-top:1px solid #eee}.te-modal .btn-primary{background:#1a1a1a;border-color:#1a1a1a;color:#fff}.te-modal .btn-primary:hover{background:#333;border-color:#333}.te-modal .btn-outline-secondary{color:#3a3a3a;border-color:#dee2e6}.te-modal .btn-outline-secondary:hover{background:#f2ede2;border-color:#ccc}.te-modal .btn-outline-danger{color:#c1272d;border-color:#c1272d}.te-modal .btn-outline-danger:hover{background:#c1272d;color:#fff}.te-modal .btn-outline-primary{color:#e8a317;border-color:#e8a317}.te-modal .btn-outline-primary:hover{background:#e8a317;color:#fff}.te-editor a{text-decoration:none}.te-editor .te-table{width:100%;border-collapse:collapse}.te-editor .te-table td,.te-editor .te-table th{border:1px solid #dee2e6;padding:6px}@media(max-width:576px){.te-toolbar .btn{padding:.35rem .5rem;font-size:.8rem}.te-toolbar select.form-select{font-size:.8rem;padding:.2rem 1.5rem .2rem .5rem}.te-editor{padding:8px;font-size:.95rem}.te-container .te-toolbar{gap:3px;padding:4px}.te-divider{margin:0 2px}.te-modal-dialog{border-radius:.5rem}.te-modal-header,.te-modal-body,.te-modal-footer{padding:.75rem 1rem}.te-modal-body{max-height:50vh}}.te-minimal .te-toolbar{display:none}