lucent/lucent-laravel
2
0
Fork 0
Code Issues 14 Pull Requests Releases 1 Activity

tip tap and trix

Browse Source
This commit is contained in:
Alex Lingris
2024-08-25 14:23:20 +03:00
parent 7b10bfca1d
commit 7c4e19afbc
12 changed files with 3151 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/common/Icon.svelte
+13
View File
@@ -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"/>', 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", 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 width = 16;
export let height = 16; export let height = 16;
export let icon = ""; export let icon = "";
front/js/svelte/libs/Tinymce.svelte
+2 -2
View File
@@ -100,8 +100,8 @@
tinymce.init({...config, ...additionalConfig}); tinymce.init({...config, ...additionalConfig});
}); });
export function insertMedia(html){ export function insertMedia(info){
activeEditor.execCommand('InsertHTML', false, html); activeEditor.execCommand('InsertHTML', false, info.html);
} }
</script> </script>
front/js/svelte/libs/TipTap.svelte
+87 -9
View File
@@ -3,9 +3,12 @@
import {Editor} from '@tiptap/core' import {Editor} from '@tiptap/core'
import Document from '@tiptap/extension-document' import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph' import Paragraph from '@tiptap/extension-paragraph'
import Dropcursor from '@tiptap/extension-dropcursor'
import Text from '@tiptap/extension-text' import Text from '@tiptap/extension-text'
import Heading from '@tiptap/extension-heading' import Heading from '@tiptap/extension-heading'
import HardBreak from '@tiptap/extension-hard-break'
import Blockquote from '@tiptap/extension-blockquote'; import Blockquote from '@tiptap/extension-blockquote';
import CodeBlock from '@tiptap/extension-code-block';
import Bold from '@tiptap/extension-bold'; import Bold from '@tiptap/extension-bold';
import BulletList from '@tiptap/extension-bullet-list'; import BulletList from '@tiptap/extension-bullet-list';
import Code from '@tiptap/extension-code'; import Code from '@tiptap/extension-code';
@@ -19,6 +22,8 @@
import TableCell from '@tiptap/extension-table-cell'; import TableCell from '@tiptap/extension-table-cell';
import TableHeader from '@tiptap/extension-table-header'; import TableHeader from '@tiptap/extension-table-header';
import Underline from '@tiptap/extension-underline'; import Underline from '@tiptap/extension-underline';
import Image from '@tiptap/extension-image';
import Icon from "../common/Icon.svelte";
let element; let element;
let editor; let editor;
@@ -32,19 +37,22 @@
Paragraph, Paragraph,
Text, Text,
Bold, Bold,
ListItem,
BulletList, BulletList,
Code, Code,
CodeBlock,
History, History,
Italic, Italic,
ListItem, HardBreak,
OrderedList, OrderedList,
ListItem,
Strike, Strike,
Table, Table,
TableRow, TableRow,
TableCell, TableCell,
TableHeader, TableHeader,
Underline, Underline,
Dropcursor,
Image,
Heading.configure({ Heading.configure({
levels: [1, 2, 3], levels: [1, 2, 3],
}), }),
@@ -56,7 +64,11 @@
// force re-render so `editor.isActive` works as expected // force re-render so `editor.isActive` works as expected
editor = editor; editor = editor;
}, },
onUpdate: ({editor}) => {
value = editor.getHTML()
},
}); });
}); });
onDestroy(() => { onDestroy(() => {
@@ -64,33 +76,99 @@
editor.destroy(); editor.destroy();
} }
}); });
export function insertMedia(info){
editor.chain().focus().setImage({ src: info.url }).run()
}
</script> </script>
{#if editor} {#if editor}
<div class="editor-toolbar">
<button <button
class="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
class:active={editor.isActive('heading', { level: 1 })} class:active={editor.isActive('heading', { level: 1 })}
> >
H1 H1
</button> </button>
<button <button
class="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
class:active={editor.isActive('heading', { level: 2 })} class:active={editor.isActive('heading', { level: 2 })}
> >
H2 H2
</button> </button>
<button <button
on:click={() => editor.chain().focus().setParagraph().run()} class="button"
class:active={editor.isActive('paragraph')}
>
P
</button>
<button
on:click={() => editor.chain().focus().toggleBold().run()} on:click={() => editor.chain().focus().toggleBold().run()}
class:active={editor.isActive('bold')} class:active={editor.isActive('bold')}
> >
Bold B
</button> </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} {/if}
<div bind:this={element} class="content"/> <div bind:this={element} class="content"/>
front/js/svelte/libs/Trix.svelte
+40 -9
View File
@@ -1,21 +1,52 @@
<script> <script>
import {onMount} from "svelte"; import {onDestroy, onMount} from "svelte";
import Trix from "trix" import Trix from "trix"
import customcss from "./tinymce.css?inline";
import "trix/dist/trix.css" import "trix/dist/trix.css"
export let value = ""; export let value = "";
let textareaEl; let editor;
let lastVal;
let editorWrapper;
let activeEditor; 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 Trix.config.blockAttributes.default.breakOnReturn = false
console.log(Trix.config) console.log(Trix.config)
</script> </script>
<div bind:this={editorWrapper} class="tox-wrapper"> <div class="tox-wrapper">
<input bind:this={textareaEl} id="x" bind:value type="hidden"> <input id="x" {value} type="hidden">
<trix-editor class="trix-content content" input="x"></trix-editor> <trix-editor
bind:this={editor}
class=" content"
input="x"
role="textbox"
tabindex="0"
on:trix-change={updateValue}
></trix-editor>
</div> </div>
front/js/svelte/records/elements/RichEditor.svelte
+6 -3
View File
@@ -2,6 +2,8 @@
import Tinymce from "../../libs/Tinymce.svelte"; import Tinymce from "../../libs/Tinymce.svelte";
import RichEditorFiles from "./RichEditorFiles.svelte"; import RichEditorFiles from "./RichEditorFiles.svelte";
import {getErrorMessage} from "./errorMessage"; import {getErrorMessage} from "./errorMessage";
import TipTap from "../../libs/TipTap.svelte";
import Trix from "../../libs/Trix.svelte";
export let value; export let value;
export let field; export let field;
@@ -24,8 +26,9 @@
<div class="mb-0"> <div class="mb-0">
<Trix bind:this={editor} bind:value></Trix>
<Tinymce bind:this={editor} bind:value {additionalConfig}/> <!-- <Tinymce bind:this={editor} bind:value {additionalConfig}/>-->
<!-- <TipTap bind:value bind:this={editor} />-->
{#if field.collections.length > 0} {#if field.collections.length > 0}
<RichEditorFiles <RichEditorFiles
bind:graph bind:graph
@@ -38,7 +41,7 @@
</RichEditorFiles> </RichEditorFiles>
{/if} {/if}
<!-- <TipTap bind:value />-->
{#if errorMessage} {#if errorMessage}
<div class="invalid-feedback d-block"> <div class="invalid-feedback d-block">
front/js/svelte/records/previews/PreviewFile.svelte
+7 -2
View File
@@ -4,7 +4,7 @@
import {createEventDispatcher, getContext} from "svelte"; import {createEventDispatcher, getContext} from "svelte";
import Preview from "../../files/Preview.svelte"; import Preview from "../../files/Preview.svelte";
import {previewTitle} from "./../Preview"; import {previewTitle} from "./../Preview";
import {htmlurl} from "../../files/imageserver.js" import {fileurl, htmlurl} from "../../files/imageserver.js"
import Status from "./../Status.svelte"; import Status from "./../Status.svelte";
import Dropdown from "../../common/Dropdown.svelte"; import Dropdown from "../../common/Dropdown.svelte";
@@ -26,7 +26,12 @@
function insert(e, preset) { function insert(e, preset) {
e.preventDefault(); e.preventDefault();
let html = htmlurl(channel, record, preset) let html = htmlurl(channel, record, preset)
dispatch("editor-insert", html); dispatch("editor-insert", {
html: html,
url: channel.filesUrl + `/templates/${preset}/${record._file.path}`,
originalUrl: channel.filesUrl + "/" + record._file.path,
record: record
});
} }
</script> </script>
front/package-lock.json
Generated
+2757 -107
View File
File diff suppressed because it is too large Load Diff
front/package.json
+26
View File
@@ -11,20 +11,46 @@
"@codemirror/lang-markdown": "^6.2.5", "@codemirror/lang-markdown": "^6.2.5",
"@codemirror/state": "^6.4.1", "@codemirror/state": "^6.4.1",
"@sveltejs/vite-plugin-svelte": "^3.1.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", "axios": "^1.7.4",
"codemirror": "^6.0.1", "codemirror": "^6.0.1",
"date-fns": "^3.6.0", "date-fns": "^3.6.0",
"flatpickr": "^4.6.13", "flatpickr": "^4.6.13",
"fuse.js": "^7.0.0", "fuse.js": "^7.0.0",
"htmx.org": "^2.0.1", "htmx.org": "^2.0.1",
"install": "^0.13.0",
"laravel-vite-plugin": "^1.0.5", "laravel-vite-plugin": "^1.0.5",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"mustache": "^4.2.0", "mustache": "^4.2.0",
"npm": "^10.8.2",
"postcss": "8.4.31", "postcss": "8.4.31",
"sass": "^1.77.8", "sass": "^1.77.8",
"sortablejs": "^1.15.2", "sortablejs": "^1.15.2",
"svelte": "^4.2.18", "svelte": "^4.2.18",
"tinymce": "^6.8.4", "tinymce": "^6.8.4",
"trix": "^2.1.5",
"uuid": "^10.0.0", "uuid": "^10.0.0",
"vite": "5.2.6" "vite": "5.2.6"
} }
front/sass/_record-edit.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.record-edit { .record-edit {
position: relative; position: relative;
max-width: 900px;
.invalid-feedback { .invalid-feedback {
color: var(--text-error); color: var(--text-error);
font-size: 15px; font-size: 15px;
front/sass/_rich.scss
+136
View File
@@ -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;
}
}
}
front/sass/_typography.scss
+57
View File
@@ -12,6 +12,15 @@
margin-bottom: 0; margin-bottom: 0;
} }
} }
h1{
font-size: 24px;
line-height: 34px;
}
h2{
font-size: 20px;
line-height: 30px;
}
ul { ul {
padding: 0 0 0 16px; 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 { .lx-small-text {
front/sass/app.scss
+1
View File
@@ -53,6 +53,7 @@
@import "./table"; @import "./table";
@import "./avatar"; @import "./avatar";
@import "./codemirror"; @import "./codemirror";
@import "./rich";
@import "./layout"; @import "./layout";
@import "./wrappers"; @import "./wrappers";
@import "./toolbar"; @import "./toolbar";