├── resources ├── views │ ├── .gitkeep │ └── forms │ │ └── components │ │ └── fields │ │ └── editorjs.blade.php ├── css │ └── editor.css ├── dist │ ├── js │ │ └── editor.js.LICENSE.txt │ └── css │ │ └── editor.css └── js │ └── editor.js ├── CHANGELOG.md ├── .gitattributes ├── src ├── FilamentEditorJsServiceProvider.php └── Forms │ └── Components │ ├── EditorJs.php │ └── Concerns │ └── InteractsWithTools.php ├── LICENSE.md ├── .php-cs-fixer.dist.php ├── composer.json └── README.md /resources/views/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to `filament-editorjs` will be documented in this file. 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | 3 | *.blade.php diff=html 4 | *.css diff=css 5 | *.html diff=html 6 | *.md diff=markdown 7 | *.php diff=php 8 | 9 | /art export-ignore 10 | .gitignore export-ignore 11 | composer.lock export-ignore 12 | mix-manifest.json export-ignore 13 | package-lock.json export-ignore 14 | package.json export-ignore 15 | tailwind.config.js export-ignore 16 | webpack.mix.js export-ignore 17 | -------------------------------------------------------------------------------- /resources/views/forms/components/fields/editorjs.blade.php: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |
merge($getExtraAttributes()) 12 | ->class([ 13 | 'editorjs-wrapper' 14 | ]) 15 | }} 16 | x-data="editorjs({ 17 | state: $wire.entangle('{{ $getStatePath() }}'), 18 | statePath: '{{ $getStatePath() }}', 19 | placeholder: '{{ $getPlaceholder() }}', 20 | readOnly: {{ $isDisabled() ? 'true' : 'false' }}, 21 | tools: @js($getTools()), 22 | minHeight: @js($getMinHeight()) 23 | })" 24 | > 25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /src/FilamentEditorJsServiceProvider.php: -------------------------------------------------------------------------------- 1 | name(static::$name) 20 | ->hasViews() 21 | ->hasAssets(); 22 | } 23 | 24 | public function packageBooted() 25 | { 26 | if (! class_exists(FilamentAsset::class)) { 27 | return; 28 | } 29 | 30 | FilamentAsset::register([ 31 | 32 | Css::make(static::$name, __DIR__ . '/../resources/dist/css/editor.css'), 33 | Js::make(static::$name, __DIR__ . '/../resources/dist/js/editor.js'), 34 | 35 | ], static::$name); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) rahmanramsi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/Forms/Components/EditorJs.php: -------------------------------------------------------------------------------- 1 | minHeight = $minHeight; 37 | 38 | return $this; 39 | } 40 | 41 | public function getMinHeight(): ?int 42 | { 43 | return $this->evaluate($this->minHeight); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/Forms/Components/Concerns/InteractsWithTools.php: -------------------------------------------------------------------------------- 1 | tools = []; 13 | } 14 | 15 | return $this; 16 | } 17 | 18 | public function disableTools(array $toolsToDisable = []): static 19 | { 20 | $this->tools = collect($this->getTools()) 21 | ->filter(static fn ($button) => !in_array($button, $toolsToDisable)) 22 | ->toArray(); 23 | 24 | return $this; 25 | } 26 | 27 | public function enableTools(array $toolsToEnable = []): static 28 | { 29 | $this->tools = array_merge($this->getTools(), $toolsToEnable); 30 | 31 | return $this; 32 | } 33 | 34 | public function tools(array | Closure $tools = []): static 35 | { 36 | $this->tools = $tools; 37 | 38 | return $this; 39 | } 40 | 41 | public function getTools(): array 42 | { 43 | return $this->evaluate($this->tools); 44 | } 45 | 46 | public function hasTools(string | array $button): bool 47 | { 48 | if (is_array($button)) { 49 | $tools = $button; 50 | 51 | return (bool) count(array_intersect($tools, $this->getTools())); 52 | } 53 | 54 | return in_array($button, $this->getTools()); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /.php-cs-fixer.dist.php: -------------------------------------------------------------------------------- 1 | in([ 5 | __DIR__ . '/src', 6 | __DIR__ . '/tests', 7 | ]) 8 | ->name('*.php') 9 | ->notName('*.blade.php') 10 | ->ignoreDotFiles(true) 11 | ->ignoreVCS(true); 12 | 13 | return (new PhpCsFixer\Config()) 14 | ->setRules([ 15 | '@PSR12' => true, 16 | 'array_syntax' => ['syntax' => 'short'], 17 | 'ordered_imports' => ['sort_algorithm' => 'alpha'], 18 | 'no_unused_imports' => true, 19 | 'not_operator_with_successor_space' => true, 20 | 'trailing_comma_in_multiline' => true, 21 | 'phpdoc_scalar' => true, 22 | 'unary_operator_spaces' => true, 23 | 'binary_operator_spaces' => true, 24 | 'blank_line_before_statement' => [ 25 | 'statements' => ['break', 'continue', 'declare', 'return', 'throw', 'try'], 26 | ], 27 | 'phpdoc_single_line_var_spacing' => true, 28 | 'phpdoc_var_without_name' => true, 29 | 'class_attributes_separation' => [ 30 | 'elements' => [ 31 | 'method' => 'one', 32 | ], 33 | ], 34 | 'method_argument_space' => [ 35 | 'on_multiline' => 'ensure_fully_multiline', 36 | 'keep_multiple_spaces_after_comma' => true, 37 | ], 38 | 'single_trait_insert_per_statement' => true, 39 | ]) 40 | ->setFinder($finder); 41 | -------------------------------------------------------------------------------- /resources/css/editor.css: -------------------------------------------------------------------------------- 1 | /* @tailwind base; */ 2 | @tailwind components; 3 | /* @tailwind utilities; */ 4 | 5 | .editorjs-wrapper { 6 | @apply border rounded-lg relative bg-white shadow-sm prose prose-sm dark:prose-invert border-gray-300 mx-auto dark:bg-white/5 dark:border-gray-600; 7 | max-width: unset; 8 | } 9 | 10 | .codex-editor__redactor { 11 | @apply px-3 py-2; 12 | } 13 | .cdx-search-field { 14 | @apply bg-transparent; 15 | } 16 | 17 | .ce-block__content, 18 | .ce-toolbar__content { 19 | max-width: unset; /* example value, adjust for your own use case */ 20 | } 21 | 22 | .ce-toolbar__plus, 23 | .ce-toolbar__settings-btn { 24 | @apply dark:text-gray-300 dark:hover:bg-gray-500; 25 | } 26 | 27 | .ce-popover { 28 | @apply dark:bg-gray-800 dark:border-gray-600; 29 | } 30 | 31 | .ce-popover-item__icon { 32 | @apply dark:bg-transparent; 33 | } 34 | 35 | .ce-popover-item { 36 | @apply dark:hover:bg-gray-700 dark:text-white; 37 | } 38 | 39 | .ce-code__textarea { 40 | @apply dark:bg-gray-800 dark:text-white; 41 | } 42 | 43 | .ce-settings { 44 | @apply dark:bg-gray-800 dark:text-white dark:border-gray-500; 45 | } 46 | 47 | .ce-settings__button, 48 | .cdx-settings-button { 49 | @apply dark:text-white dark:hover:bg-gray-500; 50 | } 51 | 52 | .cdx-search-field__icon .icon { 53 | @apply dark:text-white; 54 | } 55 | 56 | .cdx-search-field__input { 57 | @apply dark:text-white dark:placeholder:text-gray-400; 58 | } 59 | 60 | .ce-popover__no-found { 61 | @apply dark:text-gray-400; 62 | } 63 | 64 | .ce-inline-toolbar { 65 | @apply dark:bg-gray-800 dark:border-gray-600; 66 | } 67 | 68 | .ce-inline-tool { 69 | @apply dark:text-white dark:hover:bg-gray-500; 70 | } 71 | 72 | .ce-inline-tool-input { 73 | @apply block w-full transition duration-75 focus:ring-1 focus:ring-inset disabled:opacity-70 dark:bg-gray-700 dark:text-white border-gray-300 dark:border-gray-600; 74 | } 75 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rahmanramsi/filament-editorjs", 3 | "description": "Next generation block styled editor.", 4 | "keywords": [ 5 | "rahmanramsi", 6 | "laravel", 7 | "filament-editorjs" 8 | ], 9 | "homepage": "https://github.com/rahmanramsi/filament-editorjs", 10 | "license": "MIT", 11 | "authors": [ 12 | { 13 | "name": "Rahman Ramsi", 14 | "email": "rahmanramsi19@gmail.com", 15 | "role": "Developer" 16 | } 17 | ], 18 | "require": { 19 | "php": "^8.1", 20 | "spatie/laravel-package-tools": "^1.16", 21 | "illuminate/contracts": "^10.0", 22 | "filament/forms": "^3.0" 23 | }, 24 | "require-dev": { 25 | "friendsofphp/php-cs-fixer": "^3.22", 26 | "nunomaduro/collision": "^7.8", 27 | "orchestra/testbench": "^8.5", 28 | "pestphp/pest": "^2.13", 29 | "pestphp/pest-plugin-laravel": "^2.1", 30 | "phpunit/phpunit": "^10.3" 31 | }, 32 | "autoload": { 33 | "psr-4": { 34 | "FilamentEditorJs\\": "src", 35 | "FilamentEditorJs\\Database\\Factories\\": "database/factories" 36 | } 37 | }, 38 | "autoload-dev": { 39 | "psr-4": { 40 | "FilamentEditorJs\\Tests\\": "tests" 41 | } 42 | }, 43 | "scripts": { 44 | "analyse": "vendor/bin/phpstan analyse", 45 | "test": "vendor/bin/pest", 46 | "test-coverage": "vendor/bin/pest --coverage", 47 | "format": "vendor/bin/php-cs-fixer fix --allow-risky=yes" 48 | }, 49 | "config": { 50 | "sort-packages": true, 51 | "allow-plugins": { 52 | "pestphp/pest-plugin": true 53 | } 54 | }, 55 | "extra": { 56 | "laravel": { 57 | "providers": [ 58 | "FilamentEditorJs\\FilamentEditorJsServiceProvider" 59 | ] 60 | } 61 | }, 62 | "minimum-stability": "dev", 63 | "prefer-stable": true 64 | } 65 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Filament EditorJs 2 | 3 | ![Filament EditorJs](art/banner.png) 4 | [![Latest Version on Packagist](https://img.shields.io/packagist/v/rahmanramsi/filament-editorjs.svg?style=flat-square)](https://packagist.org/packages/rahmanramsi/filament-editorjs) 5 | [![Total Downloads](https://img.shields.io/packagist/dt/rahmanramsi/filament-editorjs.svg?style=flat-square)](https://packagist.org/packages/rahmanramsi/filament-editorjs) 6 | 7 | [EditorJs](https://editorjs.io/) integration for Filament Admin/Forms. 8 | 9 | ## Installation 10 | 11 | You can install the package via composer: 12 | 13 | ```bash 14 | composer require rahmanramsi/filament-editorjs 15 | ``` 16 | 17 | ## Usage 18 | 19 | ```php 20 | use FilamentEditorJs\Forms\Components\EditorJs; 21 | 22 | EditorJs::make('content') 23 | 24 | ``` 25 | 26 | ## Customization 27 | 28 | ### Tools 29 | 30 | By default all tools are enabled. This is a list of available tools: 31 | 32 | ```php 33 | [ 34 | 'header', 35 | 'image', 36 | 'delimiter', 37 | 'list', 38 | 'underline', 39 | 'quote', 40 | 'table', 41 | 'raw', 42 | 'code', 43 | 'inline-code', 44 | 'style', 45 | ] 46 | ``` 47 | 48 | You can disable any of them using by passing an array of tool names: 49 | 50 | ```php 51 | EditorJs::make('content')->disableTools(['image', 'raw']); 52 | ``` 53 | 54 | Also you can enable only certain tools: 55 | 56 | ```php 57 | EditorJs::make('content')->tools(['image', 'raw']); 58 | ``` 59 | 60 | ## Changelog 61 | 62 | Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. 63 | 64 | ## Contributing 65 | 66 | Please see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details. 67 | 68 | ## Security Vulnerabilities 69 | 70 | Please review [our security policy](../../security/policy) on how to report security vulnerabilities. 71 | 72 | ## Credits 73 | 74 | - [All Contributors](../../contributors) 75 | 76 | ## License 77 | 78 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information. 79 | -------------------------------------------------------------------------------- /resources/dist/js/editor.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! For license information please see editor.js.LICENSE.txt */ 2 | 3 | /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ 4 | 5 | /** 6 | * CodeTool for Editor.js 7 | * 8 | * @author CodeX (team@ifmo.su) 9 | * @copyright CodeX 2018 10 | * @license MIT 11 | * @version 2.0.0 12 | */ 13 | 14 | /** 15 | * Delimiter Block for the Editor.js. 16 | * 17 | * @author CodeX (team@ifmo.su) 18 | * @copyright CodeX 2018 19 | * @license The MIT License (MIT) 20 | * @version 2.0.0 21 | */ 22 | 23 | /** 24 | * Header block for the Editor.js. 25 | * 26 | * @author CodeX (team@ifmo.su) 27 | * @copyright CodeX 2018 28 | * @license MIT 29 | * @version 2.0.0 30 | */ 31 | 32 | /** 33 | * Image Tool for the Editor.js 34 | * 35 | * @author CodeX 36 | * @license MIT 37 | * @see {@link https://github.com/editor-js/image} 38 | * 39 | * To developers. 40 | * To simplify Tool structure, we split it to 4 parts: 41 | * 1) index.js — main Tool's interface, public API and methods for working with data 42 | * 2) uploader.js — module that has methods for sending files via AJAX: from device, by URL or File pasting 43 | * 3) ui.js — module for UI manipulations: render, showing preloader, etc 44 | * 4) tunes.js — working with Block Tunes: render buttons, handle clicks 45 | * 46 | * For debug purposes there is a testing server 47 | * that can save uploaded files and return a Response {@link UploadResponseFormat} 48 | * 49 | * $ node dev/server.js 50 | * 51 | * It will expose 8008 port, so you can pass http://localhost:8008 with the Tools config: 52 | * 53 | * image: { 54 | * class: ImageTool, 55 | * config: { 56 | * endpoints: { 57 | * byFile: 'http://localhost:8008/uploadFile', 58 | * byUrl: 'http://localhost:8008/fetchUrl', 59 | * } 60 | * }, 61 | * }, 62 | */ 63 | 64 | /** 65 | * Raw HTML Tool for CodeX Editor 66 | * 67 | * @author CodeX (team@codex.so) 68 | * @copyright CodeX 2018 69 | * @license The MIT License (MIT) 70 | */ 71 | -------------------------------------------------------------------------------- /resources/js/editor.js: -------------------------------------------------------------------------------- 1 | import EditorJS from "@editorjs/editorjs"; 2 | import ImageTool from "@editorjs/image"; 3 | import List from "@editorjs/list"; 4 | import Header from "@editorjs/header"; 5 | import Underline from "@editorjs/underline"; 6 | import Code from "@editorjs/code"; 7 | import InlineCode from "@editorjs/inline-code"; 8 | import Quote from "@editorjs/quote"; 9 | import Table from "@editorjs/table"; 10 | import RawTool from "@editorjs/raw"; 11 | import Delimiter from "@editorjs/delimiter"; 12 | import { StyleInlineTool } from "editorjs-style"; 13 | import DragDrop from "editorjs-drag-drop"; 14 | 15 | document.addEventListener("alpine:init", () => { 16 | Alpine.data( 17 | "editorjs", 18 | ({ state, statePath, placeholder, readOnly, tools, minHeight }) => ({ 19 | instance: null, 20 | state: state, 21 | tools: tools, 22 | uploadImage: function (blob) { 23 | return new Promise((resolve) => { 24 | this.$wire.upload( 25 | `componentFileAttachments.${statePath}`, 26 | blob, 27 | (uploadedFilename) => { 28 | this.$wire 29 | .getComponentFileAttachmentUrl(statePath) 30 | .then((url) => { 31 | if (!url) { 32 | return resolve({ 33 | success: 0, 34 | }); 35 | } 36 | return resolve({ 37 | success: 1, 38 | file: { 39 | url: url, 40 | }, 41 | }); 42 | }); 43 | } 44 | ); 45 | }); 46 | }, 47 | init() { 48 | let enabledTools = {}; 49 | 50 | if (this.tools.includes("header")) { 51 | enabledTools.header = { 52 | class: Header, 53 | inlineToolbar: true, 54 | }; 55 | } 56 | if (this.tools.includes("image")) { 57 | enabledTools.image = { 58 | class: ImageTool, 59 | config: { 60 | uploader: { 61 | uploadByFile: (file) => this.uploadImage(file), 62 | uploadByUrl: (url) => { 63 | return new Promise(async (resolve) => { 64 | return fetch(url) 65 | .then((res) => res.blob()) 66 | .then((blob) => resolve(this.uploadImage(blob))); 67 | }); 68 | }, 69 | }, 70 | }, 71 | }; 72 | } 73 | if (this.tools.includes("delimiter")) 74 | enabledTools.delimiter = Delimiter; 75 | if (this.tools.includes("list")) { 76 | enabledTools.list = { 77 | class: List, 78 | inlineToolbar: true, 79 | }; 80 | } 81 | if (this.tools.includes("underline")) 82 | enabledTools.underline = Underline; 83 | if (this.tools.includes("quote")) { 84 | enabledTools.quote = { 85 | class: Quote, 86 | inlineToolbar: true, 87 | }; 88 | } 89 | if (this.tools.includes("table")) { 90 | enabledTools.table = { 91 | class: Table, 92 | inlineToolbar: true, 93 | }; 94 | } 95 | if (this.tools.includes("raw")) enabledTools.raw = RawTool; 96 | if (this.tools.includes("code")) enabledTools.code = Code; 97 | if (this.tools.includes("inline-code")) 98 | enabledTools.inlineCode = InlineCode; 99 | if (this.tools.includes("style")) enabledTools.style = StyleInlineTool; 100 | this.instance = new EditorJS({ 101 | holder: this.$el, 102 | minHeight: minHeight, 103 | data: this.state, 104 | placeholder: placeholder, 105 | readOnly: readOnly, 106 | tools: enabledTools, 107 | 108 | onChange: () => { 109 | this.instance.save().then((outputData) => { 110 | this.state = outputData; 111 | }); 112 | }, 113 | onReady: () => { 114 | new DragDrop(this.instance); 115 | }, 116 | }); 117 | }, 118 | }) 119 | ); 120 | }); 121 | -------------------------------------------------------------------------------- /resources/dist/css/editor.css: -------------------------------------------------------------------------------- 1 | /* @tailwind base; */ 2 | /* @tailwind utilities; */ 3 | 4 | .editorjs-wrapper { 5 | color: var(--tw-prose-body); 6 | max-width: 65ch; 7 | } 8 | 9 | .editorjs-wrapper :where(p):not(:where([class~="not-prose"] *)) { 10 | margin-top: 1.25em; 11 | margin-bottom: 1.25em; 12 | } 13 | 14 | .editorjs-wrapper :where([class~="lead"]):not(:where([class~="not-prose"] *)) { 15 | color: var(--tw-prose-lead); 16 | font-size: 1.25em; 17 | line-height: 1.6; 18 | margin-top: 1.2em; 19 | margin-bottom: 1.2em; 20 | } 21 | 22 | .editorjs-wrapper :where(a):not(:where([class~="not-prose"] *)) { 23 | color: var(--tw-prose-links); 24 | text-decoration: underline; 25 | font-weight: 500; 26 | } 27 | 28 | .editorjs-wrapper :where(strong):not(:where([class~="not-prose"] *)) { 29 | color: var(--tw-prose-bold); 30 | font-weight: 600; 31 | } 32 | 33 | .editorjs-wrapper :where(a strong):not(:where([class~="not-prose"] *)) { 34 | color: inherit; 35 | } 36 | 37 | .editorjs-wrapper :where(blockquote strong):not(:where([class~="not-prose"] *)) { 38 | color: inherit; 39 | } 40 | 41 | .editorjs-wrapper :where(thead th strong):not(:where([class~="not-prose"] *)) { 42 | color: inherit; 43 | } 44 | 45 | .editorjs-wrapper :where(ol):not(:where([class~="not-prose"] *)) { 46 | list-style-type: decimal; 47 | margin-top: 1.25em; 48 | margin-bottom: 1.25em; 49 | padding-left: 1.625em; 50 | } 51 | 52 | .editorjs-wrapper :where(ol[type="A"]):not(:where([class~="not-prose"] *)) { 53 | list-style-type: upper-alpha; 54 | } 55 | 56 | .editorjs-wrapper :where(ol[type="a"]):not(:where([class~="not-prose"] *)) { 57 | list-style-type: lower-alpha; 58 | } 59 | 60 | .editorjs-wrapper :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) { 61 | list-style-type: upper-alpha; 62 | } 63 | 64 | .editorjs-wrapper :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) { 65 | list-style-type: lower-alpha; 66 | } 67 | 68 | .editorjs-wrapper :where(ol[type="I"]):not(:where([class~="not-prose"] *)) { 69 | list-style-type: upper-roman; 70 | } 71 | 72 | .editorjs-wrapper :where(ol[type="i"]):not(:where([class~="not-prose"] *)) { 73 | list-style-type: lower-roman; 74 | } 75 | 76 | .editorjs-wrapper :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) { 77 | list-style-type: upper-roman; 78 | } 79 | 80 | .editorjs-wrapper :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) { 81 | list-style-type: lower-roman; 82 | } 83 | 84 | .editorjs-wrapper :where(ol[type="1"]):not(:where([class~="not-prose"] *)) { 85 | list-style-type: decimal; 86 | } 87 | 88 | .editorjs-wrapper :where(ul):not(:where([class~="not-prose"] *)) { 89 | list-style-type: disc; 90 | margin-top: 1.25em; 91 | margin-bottom: 1.25em; 92 | padding-left: 1.625em; 93 | } 94 | 95 | .editorjs-wrapper :where(ol > li):not(:where([class~="not-prose"] *))::marker { 96 | font-weight: 400; 97 | color: var(--tw-prose-counters); 98 | } 99 | 100 | .editorjs-wrapper :where(ul > li):not(:where([class~="not-prose"] *))::marker { 101 | color: var(--tw-prose-bullets); 102 | } 103 | 104 | .editorjs-wrapper :where(hr):not(:where([class~="not-prose"] *)) { 105 | border-color: var(--tw-prose-hr); 106 | border-top-width: 1px; 107 | margin-top: 3em; 108 | margin-bottom: 3em; 109 | } 110 | 111 | .editorjs-wrapper :where(blockquote):not(:where([class~="not-prose"] *)) { 112 | font-weight: 500; 113 | font-style: italic; 114 | color: var(--tw-prose-quotes); 115 | border-left-width: 0.25rem; 116 | border-left-color: var(--tw-prose-quote-borders); 117 | quotes: "\201C""\201D""\2018""\2019"; 118 | margin-top: 1.6em; 119 | margin-bottom: 1.6em; 120 | padding-left: 1em; 121 | } 122 | 123 | .editorjs-wrapper :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before { 124 | content: open-quote; 125 | } 126 | 127 | .editorjs-wrapper :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after { 128 | content: close-quote; 129 | } 130 | 131 | .editorjs-wrapper :where(h1):not(:where([class~="not-prose"] *)) { 132 | color: var(--tw-prose-headings); 133 | font-weight: 800; 134 | font-size: 2.25em; 135 | margin-top: 0; 136 | margin-bottom: 0.8888889em; 137 | line-height: 1.1111111; 138 | } 139 | 140 | .editorjs-wrapper :where(h1 strong):not(:where([class~="not-prose"] *)) { 141 | font-weight: 900; 142 | color: inherit; 143 | } 144 | 145 | .editorjs-wrapper :where(h2):not(:where([class~="not-prose"] *)) { 146 | color: var(--tw-prose-headings); 147 | font-weight: 700; 148 | font-size: 1.5em; 149 | margin-top: 2em; 150 | margin-bottom: 1em; 151 | line-height: 1.3333333; 152 | } 153 | 154 | .editorjs-wrapper :where(h2 strong):not(:where([class~="not-prose"] *)) { 155 | font-weight: 800; 156 | color: inherit; 157 | } 158 | 159 | .editorjs-wrapper :where(h3):not(:where([class~="not-prose"] *)) { 160 | color: var(--tw-prose-headings); 161 | font-weight: 600; 162 | font-size: 1.25em; 163 | margin-top: 1.6em; 164 | margin-bottom: 0.6em; 165 | line-height: 1.6; 166 | } 167 | 168 | .editorjs-wrapper :where(h3 strong):not(:where([class~="not-prose"] *)) { 169 | font-weight: 700; 170 | color: inherit; 171 | } 172 | 173 | .editorjs-wrapper :where(h4):not(:where([class~="not-prose"] *)) { 174 | color: var(--tw-prose-headings); 175 | font-weight: 600; 176 | margin-top: 1.5em; 177 | margin-bottom: 0.5em; 178 | line-height: 1.5; 179 | } 180 | 181 | .editorjs-wrapper :where(h4 strong):not(:where([class~="not-prose"] *)) { 182 | font-weight: 700; 183 | color: inherit; 184 | } 185 | 186 | .editorjs-wrapper :where(img):not(:where([class~="not-prose"] *)) { 187 | margin-top: 2em; 188 | margin-bottom: 2em; 189 | } 190 | 191 | .editorjs-wrapper :where(figure > *):not(:where([class~="not-prose"] *)) { 192 | margin-top: 0; 193 | margin-bottom: 0; 194 | } 195 | 196 | .editorjs-wrapper :where(figcaption):not(:where([class~="not-prose"] *)) { 197 | color: var(--tw-prose-captions); 198 | font-size: 0.875em; 199 | line-height: 1.4285714; 200 | margin-top: 0.8571429em; 201 | } 202 | 203 | .editorjs-wrapper :where(code):not(:where([class~="not-prose"] *)) { 204 | color: var(--tw-prose-code); 205 | font-weight: 600; 206 | font-size: 0.875em; 207 | } 208 | 209 | .editorjs-wrapper :where(code):not(:where([class~="not-prose"] *))::before { 210 | content: "`"; 211 | } 212 | 213 | .editorjs-wrapper :where(code):not(:where([class~="not-prose"] *))::after { 214 | content: "`"; 215 | } 216 | 217 | .editorjs-wrapper :where(a code):not(:where([class~="not-prose"] *)) { 218 | color: inherit; 219 | } 220 | 221 | .editorjs-wrapper :where(h1 code):not(:where([class~="not-prose"] *)) { 222 | color: inherit; 223 | } 224 | 225 | .editorjs-wrapper :where(h2 code):not(:where([class~="not-prose"] *)) { 226 | color: inherit; 227 | font-size: 0.875em; 228 | } 229 | 230 | .editorjs-wrapper :where(h3 code):not(:where([class~="not-prose"] *)) { 231 | color: inherit; 232 | font-size: 0.9em; 233 | } 234 | 235 | .editorjs-wrapper :where(h4 code):not(:where([class~="not-prose"] *)) { 236 | color: inherit; 237 | } 238 | 239 | .editorjs-wrapper :where(blockquote code):not(:where([class~="not-prose"] *)) { 240 | color: inherit; 241 | } 242 | 243 | .editorjs-wrapper :where(thead th code):not(:where([class~="not-prose"] *)) { 244 | color: inherit; 245 | } 246 | 247 | .editorjs-wrapper :where(pre):not(:where([class~="not-prose"] *)) { 248 | color: var(--tw-prose-pre-code); 249 | background-color: var(--tw-prose-pre-bg); 250 | overflow-x: auto; 251 | font-weight: 400; 252 | font-size: 0.875em; 253 | line-height: 1.7142857; 254 | margin-top: 1.7142857em; 255 | margin-bottom: 1.7142857em; 256 | border-radius: 0.375rem; 257 | padding-top: 0.8571429em; 258 | padding-right: 1.1428571em; 259 | padding-bottom: 0.8571429em; 260 | padding-left: 1.1428571em; 261 | } 262 | 263 | .editorjs-wrapper :where(pre code):not(:where([class~="not-prose"] *)) { 264 | background-color: transparent; 265 | border-width: 0; 266 | border-radius: 0; 267 | padding: 0; 268 | font-weight: inherit; 269 | color: inherit; 270 | font-size: inherit; 271 | font-family: inherit; 272 | line-height: inherit; 273 | } 274 | 275 | .editorjs-wrapper :where(pre code):not(:where([class~="not-prose"] *))::before { 276 | content: none; 277 | } 278 | 279 | .editorjs-wrapper :where(pre code):not(:where([class~="not-prose"] *))::after { 280 | content: none; 281 | } 282 | 283 | .editorjs-wrapper :where(table):not(:where([class~="not-prose"] *)) { 284 | width: 100%; 285 | table-layout: auto; 286 | text-align: left; 287 | margin-top: 2em; 288 | margin-bottom: 2em; 289 | font-size: 0.875em; 290 | line-height: 1.7142857; 291 | } 292 | 293 | .editorjs-wrapper :where(thead):not(:where([class~="not-prose"] *)) { 294 | border-bottom-width: 1px; 295 | border-bottom-color: var(--tw-prose-th-borders); 296 | } 297 | 298 | .editorjs-wrapper :where(thead th):not(:where([class~="not-prose"] *)) { 299 | color: var(--tw-prose-headings); 300 | font-weight: 600; 301 | vertical-align: bottom; 302 | padding-right: 0.5714286em; 303 | padding-bottom: 0.5714286em; 304 | padding-left: 0.5714286em; 305 | } 306 | 307 | .editorjs-wrapper :where(tbody tr):not(:where([class~="not-prose"] *)) { 308 | border-bottom-width: 1px; 309 | border-bottom-color: var(--tw-prose-td-borders); 310 | } 311 | 312 | .editorjs-wrapper :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) { 313 | border-bottom-width: 0; 314 | } 315 | 316 | .editorjs-wrapper :where(tbody td):not(:where([class~="not-prose"] *)) { 317 | vertical-align: baseline; 318 | } 319 | 320 | .editorjs-wrapper :where(tfoot):not(:where([class~="not-prose"] *)) { 321 | border-top-width: 1px; 322 | border-top-color: var(--tw-prose-th-borders); 323 | } 324 | 325 | .editorjs-wrapper :where(tfoot td):not(:where([class~="not-prose"] *)) { 326 | vertical-align: top; 327 | } 328 | 329 | .editorjs-wrapper { 330 | --tw-prose-body: #374151; 331 | --tw-prose-headings: #111827; 332 | --tw-prose-lead: #4b5563; 333 | --tw-prose-links: #111827; 334 | --tw-prose-bold: #111827; 335 | --tw-prose-counters: #6b7280; 336 | --tw-prose-bullets: #d1d5db; 337 | --tw-prose-hr: #e5e7eb; 338 | --tw-prose-quotes: #111827; 339 | --tw-prose-quote-borders: #e5e7eb; 340 | --tw-prose-captions: #6b7280; 341 | --tw-prose-code: #111827; 342 | --tw-prose-pre-code: #e5e7eb; 343 | --tw-prose-pre-bg: #1f2937; 344 | --tw-prose-th-borders: #d1d5db; 345 | --tw-prose-td-borders: #e5e7eb; 346 | --tw-prose-invert-body: #d1d5db; 347 | --tw-prose-invert-headings: #fff; 348 | --tw-prose-invert-lead: #9ca3af; 349 | --tw-prose-invert-links: #fff; 350 | --tw-prose-invert-bold: #fff; 351 | --tw-prose-invert-counters: #9ca3af; 352 | --tw-prose-invert-bullets: #4b5563; 353 | --tw-prose-invert-hr: #374151; 354 | --tw-prose-invert-quotes: #f3f4f6; 355 | --tw-prose-invert-quote-borders: #374151; 356 | --tw-prose-invert-captions: #9ca3af; 357 | --tw-prose-invert-code: #fff; 358 | --tw-prose-invert-pre-code: #d1d5db; 359 | --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); 360 | --tw-prose-invert-th-borders: #4b5563; 361 | --tw-prose-invert-td-borders: #374151; 362 | font-size: 1rem; 363 | line-height: 1.75; 364 | } 365 | 366 | .editorjs-wrapper :where(video):not(:where([class~="not-prose"] *)) { 367 | margin-top: 2em; 368 | margin-bottom: 2em; 369 | } 370 | 371 | .editorjs-wrapper :where(figure):not(:where([class~="not-prose"] *)) { 372 | margin-top: 2em; 373 | margin-bottom: 2em; 374 | } 375 | 376 | .editorjs-wrapper :where(li):not(:where([class~="not-prose"] *)) { 377 | margin-top: 0.5em; 378 | margin-bottom: 0.5em; 379 | } 380 | 381 | .editorjs-wrapper :where(ol > li):not(:where([class~="not-prose"] *)) { 382 | padding-left: 0.375em; 383 | } 384 | 385 | .editorjs-wrapper :where(ul > li):not(:where([class~="not-prose"] *)) { 386 | padding-left: 0.375em; 387 | } 388 | 389 | .editorjs-wrapper :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { 390 | margin-top: 0.75em; 391 | margin-bottom: 0.75em; 392 | } 393 | 394 | .editorjs-wrapper :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { 395 | margin-top: 1.25em; 396 | } 397 | 398 | .editorjs-wrapper :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { 399 | margin-bottom: 1.25em; 400 | } 401 | 402 | .editorjs-wrapper :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { 403 | margin-top: 1.25em; 404 | } 405 | 406 | .editorjs-wrapper :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { 407 | margin-bottom: 1.25em; 408 | } 409 | 410 | .editorjs-wrapper :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) { 411 | margin-top: 0.75em; 412 | margin-bottom: 0.75em; 413 | } 414 | 415 | .editorjs-wrapper :where(hr + *):not(:where([class~="not-prose"] *)) { 416 | margin-top: 0; 417 | } 418 | 419 | .editorjs-wrapper :where(h2 + *):not(:where([class~="not-prose"] *)) { 420 | margin-top: 0; 421 | } 422 | 423 | .editorjs-wrapper :where(h3 + *):not(:where([class~="not-prose"] *)) { 424 | margin-top: 0; 425 | } 426 | 427 | .editorjs-wrapper :where(h4 + *):not(:where([class~="not-prose"] *)) { 428 | margin-top: 0; 429 | } 430 | 431 | .editorjs-wrapper :where(thead th:first-child):not(:where([class~="not-prose"] *)) { 432 | padding-left: 0; 433 | } 434 | 435 | .editorjs-wrapper :where(thead th:last-child):not(:where([class~="not-prose"] *)) { 436 | padding-right: 0; 437 | } 438 | 439 | .editorjs-wrapper :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) { 440 | padding-top: 0.5714286em; 441 | padding-right: 0.5714286em; 442 | padding-bottom: 0.5714286em; 443 | padding-left: 0.5714286em; 444 | } 445 | 446 | .editorjs-wrapper :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) { 447 | padding-left: 0; 448 | } 449 | 450 | .editorjs-wrapper :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) { 451 | padding-right: 0; 452 | } 453 | 454 | .editorjs-wrapper :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { 455 | margin-top: 0; 456 | } 457 | 458 | .editorjs-wrapper :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { 459 | margin-bottom: 0; 460 | } 461 | 462 | .editorjs-wrapper { 463 | font-size: 0.875rem; 464 | line-height: 1.7142857; 465 | } 466 | 467 | .editorjs-wrapper :where(p):not(:where([class~="not-prose"] *)) { 468 | margin-top: 1.1428571em; 469 | margin-bottom: 1.1428571em; 470 | } 471 | 472 | .editorjs-wrapper :where([class~="lead"]):not(:where([class~="not-prose"] *)) { 473 | font-size: 1.2857143em; 474 | line-height: 1.5555556; 475 | margin-top: 0.8888889em; 476 | margin-bottom: 0.8888889em; 477 | } 478 | 479 | .editorjs-wrapper :where(blockquote):not(:where([class~="not-prose"] *)) { 480 | margin-top: 1.3333333em; 481 | margin-bottom: 1.3333333em; 482 | padding-left: 1.1111111em; 483 | } 484 | 485 | .editorjs-wrapper :where(h1):not(:where([class~="not-prose"] *)) { 486 | font-size: 2.1428571em; 487 | margin-top: 0; 488 | margin-bottom: 0.8em; 489 | line-height: 1.2; 490 | } 491 | 492 | .editorjs-wrapper :where(h2):not(:where([class~="not-prose"] *)) { 493 | font-size: 1.4285714em; 494 | margin-top: 1.6em; 495 | margin-bottom: 0.8em; 496 | line-height: 1.4; 497 | } 498 | 499 | .editorjs-wrapper :where(h3):not(:where([class~="not-prose"] *)) { 500 | font-size: 1.2857143em; 501 | margin-top: 1.5555556em; 502 | margin-bottom: 0.4444444em; 503 | line-height: 1.5555556; 504 | } 505 | 506 | .editorjs-wrapper :where(h4):not(:where([class~="not-prose"] *)) { 507 | margin-top: 1.4285714em; 508 | margin-bottom: 0.5714286em; 509 | line-height: 1.4285714; 510 | } 511 | 512 | .editorjs-wrapper :where(img):not(:where([class~="not-prose"] *)) { 513 | margin-top: 1.7142857em; 514 | margin-bottom: 1.7142857em; 515 | } 516 | 517 | .editorjs-wrapper :where(video):not(:where([class~="not-prose"] *)) { 518 | margin-top: 1.7142857em; 519 | margin-bottom: 1.7142857em; 520 | } 521 | 522 | .editorjs-wrapper :where(figure):not(:where([class~="not-prose"] *)) { 523 | margin-top: 1.7142857em; 524 | margin-bottom: 1.7142857em; 525 | } 526 | 527 | .editorjs-wrapper :where(figure > *):not(:where([class~="not-prose"] *)) { 528 | margin-top: 0; 529 | margin-bottom: 0; 530 | } 531 | 532 | .editorjs-wrapper :where(figcaption):not(:where([class~="not-prose"] *)) { 533 | font-size: 0.8571429em; 534 | line-height: 1.3333333; 535 | margin-top: 0.6666667em; 536 | } 537 | 538 | .editorjs-wrapper :where(code):not(:where([class~="not-prose"] *)) { 539 | font-size: 0.8571429em; 540 | } 541 | 542 | .editorjs-wrapper :where(h2 code):not(:where([class~="not-prose"] *)) { 543 | font-size: 0.9em; 544 | } 545 | 546 | .editorjs-wrapper :where(h3 code):not(:where([class~="not-prose"] *)) { 547 | font-size: 0.8888889em; 548 | } 549 | 550 | .editorjs-wrapper :where(pre):not(:where([class~="not-prose"] *)) { 551 | font-size: 0.8571429em; 552 | line-height: 1.6666667; 553 | margin-top: 1.6666667em; 554 | margin-bottom: 1.6666667em; 555 | border-radius: 0.25rem; 556 | padding-top: 0.6666667em; 557 | padding-right: 1em; 558 | padding-bottom: 0.6666667em; 559 | padding-left: 1em; 560 | } 561 | 562 | .editorjs-wrapper :where(ol):not(:where([class~="not-prose"] *)) { 563 | margin-top: 1.1428571em; 564 | margin-bottom: 1.1428571em; 565 | padding-left: 1.5714286em; 566 | } 567 | 568 | .editorjs-wrapper :where(ul):not(:where([class~="not-prose"] *)) { 569 | margin-top: 1.1428571em; 570 | margin-bottom: 1.1428571em; 571 | padding-left: 1.5714286em; 572 | } 573 | 574 | .editorjs-wrapper :where(li):not(:where([class~="not-prose"] *)) { 575 | margin-top: 0.2857143em; 576 | margin-bottom: 0.2857143em; 577 | } 578 | 579 | .editorjs-wrapper :where(ol > li):not(:where([class~="not-prose"] *)) { 580 | padding-left: 0.4285714em; 581 | } 582 | 583 | .editorjs-wrapper :where(ul > li):not(:where([class~="not-prose"] *)) { 584 | padding-left: 0.4285714em; 585 | } 586 | 587 | .editorjs-wrapper :where(.prose-sm > ul > li p):not(:where([class~="not-prose"] *)) { 588 | margin-top: 0.5714286em; 589 | margin-bottom: 0.5714286em; 590 | } 591 | 592 | .editorjs-wrapper :where(.prose-sm > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { 593 | margin-top: 1.1428571em; 594 | } 595 | 596 | .editorjs-wrapper :where(.prose-sm > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { 597 | margin-bottom: 1.1428571em; 598 | } 599 | 600 | .editorjs-wrapper :where(.prose-sm > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { 601 | margin-top: 1.1428571em; 602 | } 603 | 604 | .editorjs-wrapper :where(.prose-sm > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { 605 | margin-bottom: 1.1428571em; 606 | } 607 | 608 | .editorjs-wrapper :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) { 609 | margin-top: 0.5714286em; 610 | margin-bottom: 0.5714286em; 611 | } 612 | 613 | .editorjs-wrapper :where(hr):not(:where([class~="not-prose"] *)) { 614 | margin-top: 2.8571429em; 615 | margin-bottom: 2.8571429em; 616 | } 617 | 618 | .editorjs-wrapper :where(hr + *):not(:where([class~="not-prose"] *)) { 619 | margin-top: 0; 620 | } 621 | 622 | .editorjs-wrapper :where(h2 + *):not(:where([class~="not-prose"] *)) { 623 | margin-top: 0; 624 | } 625 | 626 | .editorjs-wrapper :where(h3 + *):not(:where([class~="not-prose"] *)) { 627 | margin-top: 0; 628 | } 629 | 630 | .editorjs-wrapper :where(h4 + *):not(:where([class~="not-prose"] *)) { 631 | margin-top: 0; 632 | } 633 | 634 | .editorjs-wrapper :where(table):not(:where([class~="not-prose"] *)) { 635 | font-size: 0.8571429em; 636 | line-height: 1.5; 637 | } 638 | 639 | .editorjs-wrapper :where(thead th):not(:where([class~="not-prose"] *)) { 640 | padding-right: 1em; 641 | padding-bottom: 0.6666667em; 642 | padding-left: 1em; 643 | } 644 | 645 | .editorjs-wrapper :where(thead th:first-child):not(:where([class~="not-prose"] *)) { 646 | padding-left: 0; 647 | } 648 | 649 | .editorjs-wrapper :where(thead th:last-child):not(:where([class~="not-prose"] *)) { 650 | padding-right: 0; 651 | } 652 | 653 | .editorjs-wrapper :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) { 654 | padding-top: 0.6666667em; 655 | padding-right: 1em; 656 | padding-bottom: 0.6666667em; 657 | padding-left: 1em; 658 | } 659 | 660 | .editorjs-wrapper :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) { 661 | padding-left: 0; 662 | } 663 | 664 | .editorjs-wrapper :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) { 665 | padding-right: 0; 666 | } 667 | 668 | .editorjs-wrapper :where(.prose-sm > :first-child):not(:where([class~="not-prose"] *)) { 669 | margin-top: 0; 670 | } 671 | 672 | .editorjs-wrapper :where(.prose-sm > :last-child):not(:where([class~="not-prose"] *)) { 673 | margin-bottom: 0; 674 | } 675 | 676 | .editorjs-wrapper { 677 | position: relative; 678 | margin-left: auto; 679 | margin-right: auto; 680 | border-radius: 0.5rem; 681 | border-width: 1px; 682 | --tw-border-opacity: 1; 683 | border-color: rgb(209 213 219 / var(--tw-border-opacity)); 684 | --tw-bg-opacity: 1; 685 | background-color: rgb(255 255 255 / var(--tw-bg-opacity)); 686 | --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); 687 | --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); 688 | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); 689 | } 690 | 691 | :is(.dark .editorjs-wrapper) { 692 | --tw-prose-body: var(--tw-prose-invert-body); 693 | --tw-prose-headings: var(--tw-prose-invert-headings); 694 | --tw-prose-lead: var(--tw-prose-invert-lead); 695 | --tw-prose-links: var(--tw-prose-invert-links); 696 | --tw-prose-bold: var(--tw-prose-invert-bold); 697 | --tw-prose-counters: var(--tw-prose-invert-counters); 698 | --tw-prose-bullets: var(--tw-prose-invert-bullets); 699 | --tw-prose-hr: var(--tw-prose-invert-hr); 700 | --tw-prose-quotes: var(--tw-prose-invert-quotes); 701 | --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders); 702 | --tw-prose-captions: var(--tw-prose-invert-captions); 703 | --tw-prose-code: var(--tw-prose-invert-code); 704 | --tw-prose-pre-code: var(--tw-prose-invert-pre-code); 705 | --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg); 706 | --tw-prose-th-borders: var(--tw-prose-invert-th-borders); 707 | --tw-prose-td-borders: var(--tw-prose-invert-td-borders); 708 | --tw-border-opacity: 1; 709 | border-color: rgb(75 85 99 / var(--tw-border-opacity)); 710 | background-color: rgb(255 255 255 / 0.05); 711 | } 712 | 713 | .editorjs-wrapper { 714 | max-width: unset; 715 | } 716 | 717 | .codex-editor__redactor { 718 | padding-left: 0.75rem; 719 | padding-right: 0.75rem; 720 | padding-top: 0.5rem; 721 | padding-bottom: 0.5rem; 722 | } 723 | .cdx-search-field { 724 | background-color: transparent; 725 | } 726 | 727 | .ce-block__content, 728 | .ce-toolbar__content { 729 | max-width: unset; /* example value, adjust for your own use case */ 730 | } 731 | 732 | :is(.dark .ce-toolbar__plus),:is(.dark 733 | .ce-toolbar__settings-btn) { 734 | --tw-text-opacity: 1; 735 | color: rgb(209 213 219 / var(--tw-text-opacity)); 736 | } 737 | 738 | :is(.dark .ce-toolbar__plus:hover),:is(.dark 739 | .ce-toolbar__settings-btn:hover) { 740 | --tw-bg-opacity: 1; 741 | background-color: rgb(107 114 128 / var(--tw-bg-opacity)); 742 | } 743 | 744 | :is(.dark .ce-popover) { 745 | --tw-border-opacity: 1; 746 | border-color: rgb(75 85 99 / var(--tw-border-opacity)); 747 | --tw-bg-opacity: 1; 748 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 749 | } 750 | 751 | :is(.dark .ce-popover-item__icon) { 752 | background-color: transparent; 753 | } 754 | 755 | :is(.dark .ce-popover-item) { 756 | --tw-text-opacity: 1; 757 | color: rgb(255 255 255 / var(--tw-text-opacity)); 758 | } 759 | 760 | :is(.dark .ce-popover-item:hover) { 761 | --tw-bg-opacity: 1; 762 | background-color: rgb(55 65 81 / var(--tw-bg-opacity)); 763 | } 764 | 765 | :is(.dark .ce-code__textarea) { 766 | --tw-bg-opacity: 1; 767 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 768 | --tw-text-opacity: 1; 769 | color: rgb(255 255 255 / var(--tw-text-opacity)); 770 | } 771 | 772 | :is(.dark .ce-settings) { 773 | --tw-border-opacity: 1; 774 | border-color: rgb(107 114 128 / var(--tw-border-opacity)); 775 | --tw-bg-opacity: 1; 776 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 777 | --tw-text-opacity: 1; 778 | color: rgb(255 255 255 / var(--tw-text-opacity)); 779 | } 780 | 781 | :is(.dark .ce-settings__button),:is(.dark 782 | .cdx-settings-button) { 783 | --tw-text-opacity: 1; 784 | color: rgb(255 255 255 / var(--tw-text-opacity)); 785 | } 786 | 787 | :is(.dark .ce-settings__button:hover),:is(.dark 788 | .cdx-settings-button:hover) { 789 | --tw-bg-opacity: 1; 790 | background-color: rgb(107 114 128 / var(--tw-bg-opacity)); 791 | } 792 | 793 | :is(.dark .cdx-search-field__icon .icon) { 794 | --tw-text-opacity: 1; 795 | color: rgb(255 255 255 / var(--tw-text-opacity)); 796 | } 797 | 798 | :is(.dark .cdx-search-field__input) { 799 | --tw-text-opacity: 1; 800 | color: rgb(255 255 255 / var(--tw-text-opacity)); 801 | } 802 | 803 | :is(.dark .cdx-search-field__input)::-moz-placeholder { 804 | --tw-text-opacity: 1; 805 | color: rgb(156 163 175 / var(--tw-text-opacity)); 806 | } 807 | 808 | :is(.dark .cdx-search-field__input)::placeholder { 809 | --tw-text-opacity: 1; 810 | color: rgb(156 163 175 / var(--tw-text-opacity)); 811 | } 812 | 813 | :is(.dark .ce-popover__no-found) { 814 | --tw-text-opacity: 1; 815 | color: rgb(156 163 175 / var(--tw-text-opacity)); 816 | } 817 | 818 | :is(.dark .ce-inline-toolbar) { 819 | --tw-border-opacity: 1; 820 | border-color: rgb(75 85 99 / var(--tw-border-opacity)); 821 | --tw-bg-opacity: 1; 822 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 823 | } 824 | 825 | :is(.dark .ce-inline-tool) { 826 | --tw-text-opacity: 1; 827 | color: rgb(255 255 255 / var(--tw-text-opacity)); 828 | } 829 | 830 | :is(.dark .ce-inline-tool:hover) { 831 | --tw-bg-opacity: 1; 832 | background-color: rgb(107 114 128 / var(--tw-bg-opacity)); 833 | } 834 | 835 | .ce-inline-tool-input { 836 | display: block; 837 | width: 100%; 838 | --tw-border-opacity: 1; 839 | border-color: rgb(209 213 219 / var(--tw-border-opacity)); 840 | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; 841 | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; 842 | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; 843 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 844 | transition-duration: 75ms; 845 | } 846 | 847 | .ce-inline-tool-input:focus { 848 | --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); 849 | --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); 850 | box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); 851 | --tw-ring-inset: inset; 852 | } 853 | 854 | .ce-inline-tool-input:disabled { 855 | opacity: 0.7; 856 | } 857 | 858 | :is(.dark .ce-inline-tool-input) { 859 | --tw-border-opacity: 1; 860 | border-color: rgb(75 85 99 / var(--tw-border-opacity)); 861 | --tw-bg-opacity: 1; 862 | background-color: rgb(55 65 81 / var(--tw-bg-opacity)); 863 | --tw-text-opacity: 1; 864 | color: rgb(255 255 255 / var(--tw-text-opacity)); 865 | } 866 | 867 | --------------------------------------------------------------------------------