tip tap and trix
This commit is contained in:
@@ -113,8 +113,21 @@
|
||||
path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4-4m-4 4 4 4"/>',
|
||||
viewBox: "0 0 24 24",
|
||||
},
|
||||
"list": {
|
||||
path: '<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M9 8h10M9 12h10M9 16h10M4.99 8H5m-.02 4h.01m0 4H5"/>',
|
||||
viewBox: "0 0 24 24",
|
||||
},
|
||||
"ordered-list": {
|
||||
path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6h8m-8 6h8m-8 6h8M4 16a2 2 0 1 1 3.321 1.5L4 20h5M4 5l2-1v6m-2 0h4"/>',
|
||||
viewBox: "0 0 24 24",
|
||||
},
|
||||
"italic": {
|
||||
path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8.874 19 6.143-14M6 19h6.33m-.66-14H18"/>',
|
||||
viewBox: "0 0 24 24",
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
export let width = 16;
|
||||
export let height = 16;
|
||||
export let icon = "";
|
||||
|
||||
@@ -100,8 +100,8 @@
|
||||
tinymce.init({...config, ...additionalConfig});
|
||||
});
|
||||
|
||||
export function insertMedia(html){
|
||||
activeEditor.execCommand('InsertHTML', false, html);
|
||||
export function insertMedia(info){
|
||||
activeEditor.execCommand('InsertHTML', false, info.html);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -3,9 +3,12 @@
|
||||
import {Editor} from '@tiptap/core'
|
||||
import Document from '@tiptap/extension-document'
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
import Dropcursor from '@tiptap/extension-dropcursor'
|
||||
import Text from '@tiptap/extension-text'
|
||||
import Heading from '@tiptap/extension-heading'
|
||||
import HardBreak from '@tiptap/extension-hard-break'
|
||||
import Blockquote from '@tiptap/extension-blockquote';
|
||||
import CodeBlock from '@tiptap/extension-code-block';
|
||||
import Bold from '@tiptap/extension-bold';
|
||||
import BulletList from '@tiptap/extension-bullet-list';
|
||||
import Code from '@tiptap/extension-code';
|
||||
@@ -19,6 +22,8 @@
|
||||
import TableCell from '@tiptap/extension-table-cell';
|
||||
import TableHeader from '@tiptap/extension-table-header';
|
||||
import Underline from '@tiptap/extension-underline';
|
||||
import Image from '@tiptap/extension-image';
|
||||
import Icon from "../common/Icon.svelte";
|
||||
|
||||
let element;
|
||||
let editor;
|
||||
@@ -32,19 +37,22 @@
|
||||
Paragraph,
|
||||
Text,
|
||||
Bold,
|
||||
ListItem,
|
||||
BulletList,
|
||||
Code,
|
||||
CodeBlock,
|
||||
History,
|
||||
Italic,
|
||||
ListItem,
|
||||
HardBreak,
|
||||
OrderedList,
|
||||
ListItem,
|
||||
Strike,
|
||||
Table,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableHeader,
|
||||
Underline,
|
||||
Dropcursor,
|
||||
Image,
|
||||
Heading.configure({
|
||||
levels: [1, 2, 3],
|
||||
}),
|
||||
@@ -56,7 +64,11 @@
|
||||
// force re-render so `editor.isActive` works as expected
|
||||
editor = editor;
|
||||
},
|
||||
onUpdate: ({editor}) => {
|
||||
value = editor.getHTML()
|
||||
},
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
@@ -64,33 +76,99 @@
|
||||
editor.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
export function insertMedia(info){
|
||||
editor.chain().focus().setImage({ src: info.url }).run()
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if editor}
|
||||
<button
|
||||
on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
||||
class:active={editor.isActive('heading', { level: 1 })}
|
||||
>
|
||||
H1
|
||||
</button>
|
||||
<button
|
||||
on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
||||
class:active={editor.isActive('heading', { level: 2 })}
|
||||
>
|
||||
H2
|
||||
</button>
|
||||
<button
|
||||
on:click={() => editor.chain().focus().setParagraph().run()}
|
||||
class:active={editor.isActive('paragraph')}
|
||||
>
|
||||
P
|
||||
</button>
|
||||
<button
|
||||
on:click={() => editor.chain().focus().toggleBold().run()}
|
||||
class:active={editor.isActive('bold')}
|
||||
>
|
||||
Bold
|
||||
</button>
|
||||
<div class="editor-toolbar">
|
||||
<button
|
||||
class="button"
|
||||
on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
||||
class:active={editor.isActive('heading', { level: 1 })}
|
||||
>
|
||||
H1
|
||||
</button>
|
||||
<button
|
||||
class="button"
|
||||
on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
||||
class:active={editor.isActive('heading', { level: 2 })}
|
||||
>
|
||||
H2
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="button"
|
||||
on:click={() => editor.chain().focus().toggleBold().run()}
|
||||
class:active={editor.isActive('bold')}
|
||||
>
|
||||
B
|
||||
</button>
|
||||
<button
|
||||
class="button"
|
||||
on:click={() => editor.chain().focus().toggleItalic().run()}
|
||||
class:active={editor.isActive('italic')}
|
||||
>
|
||||
<em>IT</em>
|
||||
</button>
|
||||
<button
|
||||
class="button"
|
||||
on:click={() => editor.chain().focus().toggleUnderline().run()}
|
||||
class:active={editor.isActive('underline')}
|
||||
>
|
||||
<u>U</u>
|
||||
</button>
|
||||
<button
|
||||
class="button"
|
||||
on:click={() => editor.chain().focus().toggleStrike().run()}
|
||||
class:active={editor.isActive('strike')}
|
||||
>
|
||||
<s>S</s>
|
||||
</button>
|
||||
<button
|
||||
class="button"
|
||||
on:click={() => editor.commands.unsetAllMarks()}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
class="button"
|
||||
on:click={() => editor.chain().focus().toggleCode().run()}
|
||||
class:active={editor.isActive('code')}
|
||||
>
|
||||
Code
|
||||
</button>
|
||||
<button
|
||||
class="button"
|
||||
on:click={() => editor.chain().focus().toggleBulletList().run()}
|
||||
class:active={editor.isActive('bulletList')}
|
||||
>
|
||||
<Icon icon="list"></Icon>
|
||||
</button>
|
||||
<button
|
||||
class="button"
|
||||
on:click={() => editor.chain().focus().toggleOrderedList().run()}
|
||||
class:active={editor.isActive('orderedList')}
|
||||
>
|
||||
<Icon icon="ordered-list"></Icon>
|
||||
</button>
|
||||
<button
|
||||
class="button"
|
||||
on:click={() => editor.chain().focus().toggleBlockquote().run()}
|
||||
class:active={editor.isActive('blockquote')}
|
||||
>
|
||||
""
|
||||
</button>
|
||||
<button
|
||||
class="button"
|
||||
on:click={() => editor.chain().focus().toggleCodeBlock().run()}
|
||||
class:active={editor.isActive('codeBlock')}
|
||||
>
|
||||
cb
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div bind:this={element} class="content"/>
|
||||
@@ -1,21 +1,52 @@
|
||||
<script>
|
||||
import {onMount} from "svelte";
|
||||
import {onDestroy, onMount} from "svelte";
|
||||
import Trix from "trix"
|
||||
import customcss from "./tinymce.css?inline";
|
||||
import "trix/dist/trix.css"
|
||||
|
||||
export let value = "";
|
||||
let textareaEl;
|
||||
let lastVal;
|
||||
let editorWrapper;
|
||||
let activeEditor;
|
||||
let editor;
|
||||
|
||||
|
||||
function updateValue(e) {
|
||||
value = e.target.value;
|
||||
}
|
||||
|
||||
export function insertMedia(info){
|
||||
if(info.record._file.width > 0){
|
||||
var attachment = new Trix.Attachment({ content: info.html })
|
||||
editor.editor.insertAttachment(attachment)
|
||||
}else{
|
||||
editor.editor.insertHTML(`<a href="${info.originalUrl}">${info.record._file.originalName}</a>`)
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
editor.addEventListener("trix-file-accept", (e) => {
|
||||
e.preventDefault();
|
||||
})
|
||||
})
|
||||
onDestroy(() => {
|
||||
editor.removeEventListener("trix-before-initialize")
|
||||
})
|
||||
|
||||
|
||||
Trix.config.blockAttributes.default.breakOnReturn = false
|
||||
console.log(Trix.config)
|
||||
|
||||
</script>
|
||||
|
||||
<div bind:this={editorWrapper} class="tox-wrapper">
|
||||
<input bind:this={textareaEl} id="x" bind:value type="hidden">
|
||||
<trix-editor class="trix-content content" input="x"></trix-editor>
|
||||
<div class="tox-wrapper">
|
||||
<input id="x" {value} type="hidden">
|
||||
<trix-editor
|
||||
bind:this={editor}
|
||||
class=" content"
|
||||
input="x"
|
||||
role="textbox"
|
||||
tabindex="0"
|
||||
on:trix-change={updateValue}
|
||||
|
||||
></trix-editor>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
import Tinymce from "../../libs/Tinymce.svelte";
|
||||
import RichEditorFiles from "./RichEditorFiles.svelte";
|
||||
import {getErrorMessage} from "./errorMessage";
|
||||
import TipTap from "../../libs/TipTap.svelte";
|
||||
import Trix from "../../libs/Trix.svelte";
|
||||
|
||||
export let value;
|
||||
export let field;
|
||||
@@ -24,8 +26,9 @@
|
||||
|
||||
<div class="mb-0">
|
||||
|
||||
|
||||
<Tinymce bind:this={editor} bind:value {additionalConfig}/>
|
||||
<Trix bind:this={editor} bind:value></Trix>
|
||||
<!-- <Tinymce bind:this={editor} bind:value {additionalConfig}/>-->
|
||||
<!-- <TipTap bind:value bind:this={editor} />-->
|
||||
{#if field.collections.length > 0}
|
||||
<RichEditorFiles
|
||||
bind:graph
|
||||
@@ -38,7 +41,7 @@
|
||||
|
||||
</RichEditorFiles>
|
||||
{/if}
|
||||
<!-- <TipTap bind:value />-->
|
||||
|
||||
|
||||
{#if errorMessage}
|
||||
<div class="invalid-feedback d-block">
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
import {createEventDispatcher, getContext} from "svelte";
|
||||
import Preview from "../../files/Preview.svelte";
|
||||
import {previewTitle} from "./../Preview";
|
||||
import {htmlurl} from "../../files/imageserver.js"
|
||||
import {fileurl, htmlurl} from "../../files/imageserver.js"
|
||||
import Status from "./../Status.svelte";
|
||||
import Dropdown from "../../common/Dropdown.svelte";
|
||||
|
||||
@@ -25,8 +25,13 @@
|
||||
|
||||
function insert(e, preset) {
|
||||
e.preventDefault();
|
||||
let html = htmlurl(channel,record, preset)
|
||||
dispatch("editor-insert", html);
|
||||
let html = htmlurl(channel, record, preset)
|
||||
dispatch("editor-insert", {
|
||||
html: html,
|
||||
url: channel.filesUrl + `/templates/${preset}/${record._file.path}`,
|
||||
originalUrl: channel.filesUrl + "/" + record._file.path,
|
||||
record: record
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Generated
+2757
-107
File diff suppressed because it is too large
Load Diff
@@ -11,20 +11,46 @@
|
||||
"@codemirror/lang-markdown": "^6.2.5",
|
||||
"@codemirror/state": "^6.4.1",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.1.1",
|
||||
"@tiptap/core": "^2.6.6",
|
||||
"@tiptap/extension-blockquote": "^2.6.6",
|
||||
"@tiptap/extension-bold": "^2.6.6",
|
||||
"@tiptap/extension-bullet-list": "^2.6.6",
|
||||
"@tiptap/extension-code": "^2.6.6",
|
||||
"@tiptap/extension-code-block": "^2.6.6",
|
||||
"@tiptap/extension-document": "^2.6.6",
|
||||
"@tiptap/extension-dropcursor": "^2.6.6",
|
||||
"@tiptap/extension-hard-break": "^2.6.6",
|
||||
"@tiptap/extension-heading": "^2.6.6",
|
||||
"@tiptap/extension-history": "^2.6.6",
|
||||
"@tiptap/extension-image": "^2.6.6",
|
||||
"@tiptap/extension-italic": "^2.6.6",
|
||||
"@tiptap/extension-list-item": "^2.6.6",
|
||||
"@tiptap/extension-ordered-list": "^2.6.6",
|
||||
"@tiptap/extension-paragraph": "^2.6.6",
|
||||
"@tiptap/extension-strike": "^2.6.6",
|
||||
"@tiptap/extension-table": "^2.6.6",
|
||||
"@tiptap/extension-table-cell": "^2.6.6",
|
||||
"@tiptap/extension-table-header": "^2.6.6",
|
||||
"@tiptap/extension-table-row": "^2.6.6",
|
||||
"@tiptap/extension-text": "^2.6.6",
|
||||
"@tiptap/extension-underline": "^2.6.6",
|
||||
"axios": "^1.7.4",
|
||||
"codemirror": "^6.0.1",
|
||||
"date-fns": "^3.6.0",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fuse.js": "^7.0.0",
|
||||
"htmx.org": "^2.0.1",
|
||||
"install": "^0.13.0",
|
||||
"laravel-vite-plugin": "^1.0.5",
|
||||
"lodash": "^4.17.21",
|
||||
"mustache": "^4.2.0",
|
||||
"npm": "^10.8.2",
|
||||
"postcss": "8.4.31",
|
||||
"sass": "^1.77.8",
|
||||
"sortablejs": "^1.15.2",
|
||||
"svelte": "^4.2.18",
|
||||
"tinymce": "^6.8.4",
|
||||
"trix": "^2.1.5",
|
||||
"uuid": "^10.0.0",
|
||||
"vite": "5.2.6"
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.record-edit {
|
||||
position: relative;
|
||||
|
||||
max-width: 900px;
|
||||
.invalid-feedback {
|
||||
color: var(--text-error);
|
||||
font-size: 15px;
|
||||
|
||||
@@ -0,0 +1,136 @@
|
||||
.tiptap {
|
||||
width: 100%;
|
||||
background: var(--p20);
|
||||
border: 1px solid var(--p50);
|
||||
border-radius: 0 0 5px 5px;
|
||||
padding: 15px 15px;
|
||||
font-size: 16px;
|
||||
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
&:focus {
|
||||
background: var(--p10);
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
&.ProseMirror-selectednode {
|
||||
box-shadow: 0 0 1px 2px var(--p70);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.editor-field {
|
||||
.editor-toolbar {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
background: var(--p30);
|
||||
border-radius: 5px 5px 0 0;
|
||||
padding: 5px 7px;
|
||||
|
||||
.button:not(.primary) {
|
||||
font-weight: 700;
|
||||
|
||||
&.active {
|
||||
background: var(--p40);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.tiptap {
|
||||
li > p {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
trix-editor {
|
||||
|
||||
& > div {
|
||||
margin-bottom: 14px;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
.attachment {
|
||||
background: var(--p10);
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
[data-trix-mutable].attachment img {
|
||||
box-shadow: 0 0 1px 2px var(--p70) !important;
|
||||
|
||||
}
|
||||
|
||||
.trix-button--remove {
|
||||
box-shadow: none !important;
|
||||
border: 2px solid var(--p40) !important;
|
||||
}
|
||||
|
||||
.trix-button--remove:hover {
|
||||
border: 2px solid var(--p40);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--p80);
|
||||
}
|
||||
}
|
||||
|
||||
trix-toolbar {
|
||||
.trix-button-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.trix-button-group {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
display: flex !important;
|
||||
gap: 4px;
|
||||
}
|
||||
.trix-button-group--history-tools,.trix-button-group--file-tools
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.trix-button {
|
||||
border-radius: 6px !important;
|
||||
background: var(--p30) !important;
|
||||
padding: 14px 22px !important;
|
||||
margin: 0 !important;
|
||||
cursor: pointer;
|
||||
border: 0px solid var(--p30) !important;
|
||||
font-size: 14px !important;
|
||||
min-height: 27px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 4px;
|
||||
color: var(--text) !important;
|
||||
|
||||
&:before{
|
||||
background-size: 22px!important;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: var(--p40) !important;
|
||||
}
|
||||
&.trix-active{
|
||||
background: var(--p50) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -12,6 +12,15 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
h1{
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0 0 0 16px;
|
||||
@@ -31,6 +40,54 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
code{
|
||||
background: var(--p30);
|
||||
padding: 0 6px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
img{
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
blockquote{
|
||||
border:1px solid var(--p30);
|
||||
border-radius: 12px;
|
||||
padding: 12px 40px;
|
||||
position: relative;
|
||||
|
||||
&::before{
|
||||
content: "\201C";
|
||||
color: var(--p60);
|
||||
font-size:4em;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
&::after{
|
||||
content: '';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--grey-light);
|
||||
border-radius: 0.5rem;
|
||||
color: var(--white);
|
||||
font-family: 'JetBrainsMono', monospace;
|
||||
margin: 1.5rem 0;
|
||||
padding: 0.75rem 1rem;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-size: 0.8rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.lx-small-text {
|
||||
|
||||
@@ -53,6 +53,7 @@
|
||||
@import "./table";
|
||||
@import "./avatar";
|
||||
@import "./codemirror";
|
||||
@import "./rich";
|
||||
@import "./layout";
|
||||
@import "./wrappers";
|
||||
@import "./toolbar";
|
||||
|
||||
Reference in New Issue
Block a user