Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up and working on the rich text editor. Will probably swap my version out for something else...

Browse Source
This commit is contained in:
Scott Idem
2024-12-02 14:56:22 -05:00
parent c0fe69ea73
commit 058c88c766
13 changed files with 290 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/ae_events/ae_events__event.ts
View File

@@ -331,7 +331,7 @@ export async function qry_ae_obj_li__event(
}
// Updated 2024-09-25
// Updated 2024-12-02
export async function create_ae_obj__event(
{
api_cfg,
@@ -371,7 +371,8 @@ export async function create_ae_obj__event(
db_save_ae_obj_li__event(
{
obj_type: 'event',
obj_li: [event_obj_create_result]
obj_li: [event_obj_create_result],
log_lvl: log_lvl
});
}
return event_obj_create_result;

181
src/lib/element_tiptap_editor.scss
View File

@@ -1,102 +1,113 @@
/* Basic editor styles */
.tiptap {
:first-child {
margin-top: 0;
}
/* List styles */
ul {
list-style-type: disc;
margin-left: 1.5rem;
// border: solid thin red;
}
ol {
list-style-type: decimal;
margin-left: 1.5rem;
// border: solid thin red;
}
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
:first-child {
margin-top: 0;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
/* Link styles */
a {
color: var(--purple);
cursor: pointer;
text-decoration: underline;
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
&:hover {
color: var(--purple-contrast);
}
}
h1 {
font-size: 1.4rem;
}
/* List styles */
ul {
list-style-type: disc;
margin-left: 1.5rem;
// border: solid thin red;
}
ol {
list-style-type: decimal;
margin-left: 1.5rem;
// border: solid thin red;
}
h2 {
font-size: 1.2rem;
}
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
h3 {
font-size: 1.1rem;
}
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

110
src/lib/element_tiptap_editor.svelte
View File

@@ -24,6 +24,7 @@ import Strike from '@tiptap/extension-strike';
import Text from '@tiptap/extension-text';
import TextStyle from '@tiptap/extension-text-style';
import Typography from '@tiptap/extension-typography';
import Underline from '@tiptap/extension-underline';
import "./element_tiptap_editor.scss";
@@ -125,10 +126,11 @@ onMount(() => {
CodeBlock, // part of StarterKit
Italic, // part of StarterKit
Strike, // part of StarterKit
Underline, // part of StarterKit
BulletList, // part of StarterKit
Color.configure({ types: [TextStyle.name, ListItem.name] }),
TextStyle.configure({ types: [ListItem.name] }),
Heading.configure({ levels: [1, 2, 3, 4, 5, 6] }),
// Color.configure({ types: [TextStyle.name, ListItem.name] }),
// TextStyle.configure({ types: [ListItem.name] }),
// Heading.configure({ levels: [1, 2, 3, 4, 5, 6] }),
Highlight,
History.configure({
depth: 100,
@@ -141,56 +143,56 @@ onMount(() => {
protocols: ['http', 'https'],
isAllowedUri: (url, ctx) => {
try {
// construct URL
const parsedUrl = url.includes(':') ? new URL(url) : new URL(`${ctx.defaultProtocol}://${url}`)
// construct URL
const parsedUrl = url.includes(':') ? new URL(url) : new URL(`${ctx.defaultProtocol}://${url}`)
// use default validation
if (!ctx.defaultValidate(parsedUrl.href)) {
// use default validation
if (!ctx.defaultValidate(parsedUrl.href)) {
return false
}
// disallowed protocols
const disallowedProtocols = ['ftp', 'file', 'mailto']
const protocol = parsedUrl.protocol.replace(':', '')
if (disallowedProtocols.includes(protocol)) {
return false
}
// only allow protocols specified in ctx.protocols
const allowedProtocols = ctx.protocols.map(p => (typeof p === 'string' ? p : p.scheme))
if (!allowedProtocols.includes(protocol)) {
return false
}
// disallowed domains
const disallowedDomains = ['example-phishing.com', 'malicious-site.net']
const domain = parsedUrl.hostname
if (disallowedDomains.includes(domain)) {
return false
}
// all checks have passed
return true
} catch (error) {
return false
}
// disallowed protocols
const disallowedProtocols = ['ftp', 'file', 'mailto']
const protocol = parsedUrl.protocol.replace(':', '')
if (disallowedProtocols.includes(protocol)) {
return false
}
// only allow protocols specified in ctx.protocols
const allowedProtocols = ctx.protocols.map(p => (typeof p === 'string' ? p : p.scheme))
if (!allowedProtocols.includes(protocol)) {
return false
}
// disallowed domains
const disallowedDomains = ['example-phishing.com', 'malicious-site.net']
const domain = parsedUrl.hostname
if (disallowedDomains.includes(domain)) {
return false
}
// all checks have passed
return true
} catch (error) {
return false
}
},
shouldAutoLink: url => {
try {
// construct URL
const parsedUrl = url.includes(':') ? new URL(url) : new URL(`https://${url}`)
// construct URL
const parsedUrl = url.includes(':') ? new URL(url) : new URL(`https://${url}`)
// only auto-link if the domain is not in the disallowed list
const disallowedDomains = ['example-no-autolink.com', 'another-no-autolink.com']
const domain = parsedUrl.hostname
// only auto-link if the domain is not in the disallowed list
const disallowedDomains = ['example-no-autolink.com', 'another-no-autolink.com']
const domain = parsedUrl.hostname
return !disallowedDomains.includes(domain)
} catch (error) {
return false
}
return !disallowedDomains.includes(domain)
} catch (error) {
return false
}
},
}),
ListItem,
@@ -201,18 +203,20 @@ onMount(() => {
Typography,
],
content: html_text,
onTransaction: () => {
onTransaction: ({ editor, transaction }) => {
// console.log('onTransaction');
// force re-render so `editor.isActive` works as expected
editor = editor;
// editor = editor;
let updated_html = editor.getHTML();
if (updated_html == '<p></p>') {
new_html = '';
} else {
new_html = updated_html;
}
// let updated_html = editor.getHTML();
// if (updated_html == '<p></p>') {
// new_html = '';
// } else {
// new_html = updated_html;
// }
},
onUpdate: ({ editor }) => {
console.log('onUpdate', editor.getHTML());
let updated_html = editor.getHTML();
if (updated_html == '<p></p>') {
new_html = '';