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

file uploads

Browse Source
This commit is contained in:
Alex Lingris
2026-05-06 18:11:42 +03:00
parent 16e50e2d49
commit 5587e8b4b6
41 changed files with 685 additions and 1067 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/libs/CodemirrorMarkdown.svelte
+15 -23
View File
@@ -1,14 +1,13 @@
<script>
// https://codesandbox.io/s/codemirror-remark-editor-4m4z9?file=/src/CodeEditor.js:374-387
import {onDestroy, onMount} from "svelte";
import {basicSetup, EditorView} from "codemirror";
import {autocompletion, completionKeymap} from "@codemirror/autocomplete";
import {Compartment, EditorState} from "@codemirror/state";
import {keymap} from "@codemirror/view";
import {indentWithTab} from "@codemirror/commands";
import {markdown} from "@codemirror/lang-markdown";
import {lintKeymap} from "@codemirror/lint";
import { onDestroy, onMount } from "svelte";
import { basicSetup, EditorView } from "codemirror";
import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
import { Compartment, EditorState } from "@codemirror/state";
import { keymap } from "@codemirror/view";
import { indentWithTab } from "@codemirror/commands";
import { markdown } from "@codemirror/lang-markdown";
import { lintKeymap } from "@codemirror/lint";
let parentElement;
let codeMirrorView;
@@ -17,10 +16,10 @@
export function insertMedia(info) {
let insertText = "";
if (info.record._file.width > 0) {
insertText = `![${info.record._file.originalName}](${info.url})`;
if (info.file.width > 0) {
insertText = `![${info.file.filename}](${info.url})`;
} else {
insertText = `[${info.record._file.originalName}](${info.originalUrl})`;
insertText = `[${info.file.filename}](${info.originalUrl})`;
}
const cursor = codeMirrorView.state.selection.main.head;
const transaction = codeMirrorView.state.update({
@@ -29,7 +28,7 @@
insert: insertText,
},
// the next 2 lines will set the appropriate cursor position after inserting the new text.
selection: {anchor: cursor + 1},
selection: { anchor: cursor + 1 },
scrollIntoView: true,
});
@@ -46,11 +45,7 @@
doc: value,
extensions: [
basicSetup,
keymap.of([
indentWithTab,
...lintKeymap,
...completionKeymap
]),
keymap.of([indentWithTab, ...lintKeymap, ...completionKeymap]),
language.of(markdown()),
markdown(),
autocompletion(),
@@ -63,17 +58,14 @@
}
}),
EditorView.lineWrapping,
EditorView.contentAttributes.of({spellcheck: "true"})
EditorView.contentAttributes.of({ spellcheck: "true" }),
],
});
codeMirrorView = new EditorView({
state,
parent: parentElement,
});
});
onDestroy(() => {
@@ -83,4 +75,4 @@
});
</script>
<div class="is-editable-{editable}" bind:this={parentElement}/>
<div class="is-editable-{editable}" bind:this={parentElement} />
front/js/svelte/libs/Trix.svelte
+34 -36
View File
@@ -1,68 +1,66 @@
<script>
import {onDestroy, onMount} from "svelte";
import Trix from "trix"
import "trix/dist/trix.css"
import { onDestroy, onMount } from "svelte";
import Trix from "trix";
import "trix/dist/trix.css";
export let value = "";
export let field;
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>`)
export function insertMedia(info) {
if (info.file.width > 0) {
var attachment = new Trix.Attachment({ content: info.html });
editor.editor.insertAttachment(attachment);
} else {
editor.editor.insertHTML(
`<a href="${info.originalUrl}">${info.file.filename}</a>`,
);
}
}
onMount(() => {
editor.addEventListener("trix-file-accept", (e) => {
e.preventDefault();
})
});
editor.addEventListener("trix-before-initialize", (e) => {
Trix.config.blockAttributes.heading1.tagName = 'h2';
const { toolbarElement } = e.target
const h1Button = toolbarElement.querySelector("[data-trix-attribute=heading1]")
h1Button.insertAdjacentHTML("afterend", `<button style="text-indent: initial;padding: 14px 10px !important;" type="button" class="trix-button trix-button--icon" data-trix-attribute="heading3" title="Heading 3" tabindex="-1" data-trix-active="">H3</button>`)
})
})
Trix.config.blockAttributes.heading1.tagName = "h2";
const { toolbarElement } = e.target;
const h1Button = toolbarElement.querySelector(
"[data-trix-attribute=heading1]",
);
h1Button.insertAdjacentHTML(
"afterend",
`<button style="text-indent: initial;padding: 14px 10px !important;" type="button" class="trix-button trix-button--icon" data-trix-attribute="heading3" title="Heading 3" tabindex="-1" data-trix-active="">H3</button>`,
);
});
});
// onDestroy(() => {
// editor.removeEventListener("trix-before-initialize")
// })
Trix.config.blockAttributes.default.breakOnReturn = false
Trix.config.blockAttributes.default.breakOnReturn = false;
Trix.config.blockAttributes.heading3 = {
tagName: 'h3',
tagName: "h3",
terminal: true,
breakOnReturn: true,
group: false
}
group: false,
};
// console.log(Trix.config)
</script>
<div class="tox-wrapper">
<input id="x-{field.name}" {value} type="hidden">
<input id="x-{field.name}" {value} type="hidden" />
<trix-editor
bind:this={editor}
class=" content"
input="x-{field.name}"
role="textbox"
tabindex="0"
on:trix-change={updateValue}
bind:this={editor}
class=" content"
input="x-{field.name}"
role="textbox"
tabindex="0"
on:trix-change={updateValue}
></trix-editor>
</div>