diff --git a/apps/hub/app/components/RichArtickle.vue b/apps/hub/app/components/RichArtickle.vue index 0ad6209..b3424cd 100644 --- a/apps/hub/app/components/RichArtickle.vue +++ b/apps/hub/app/components/RichArtickle.vue @@ -63,4 +63,11 @@ const contentEditor = useEditor({ height: 0; pointer-events: none; } + +// Oveflowing text + +.ProseMirror p span.overflow { + color: var(--warning-100); + text-decoration: line-through; +} diff --git a/apps/hub/app/composables/useTiptap/extensions/Overflow.ts b/apps/hub/app/composables/useTiptap/extensions/Overflow.ts index 9bfc255..56243ce 100644 --- a/apps/hub/app/composables/useTiptap/extensions/Overflow.ts +++ b/apps/hub/app/composables/useTiptap/extensions/Overflow.ts @@ -1,8 +1,8 @@ -import TextStyle from '@tiptap/extension-placeholder' +import Bold from '@tiptap/extension-bold' import { mergeAttributes } from '@tiptap/core' import type { Editor } from '@tiptap/core' -export const Overflow = TextStyle.extend({ +export const Overflow = Bold.extend({ name: 'overflow', renderHTML({ HTMLAttributes }) { return ['span', mergeAttributes(HTMLAttributes, { class: 'overflow' }), 0] @@ -39,6 +39,8 @@ export function validateOverflow(editor: Editor, props: { limit: number }) { const limit = current.start + props.limit const inner = Math.min(current.end, limit) + console.log('current', schema.marks) + const overflowMark = schema.marks.overflow.create() removeMark(current.start, inner, overflowMark) diff --git a/apps/hub/app/layouts/default.vue b/apps/hub/app/layouts/default.vue index 963ded1..42541e3 100644 --- a/apps/hub/app/layouts/default.vue +++ b/apps/hub/app/layouts/default.vue @@ -71,14 +71,11 @@ onKeyStroke('Escape', () => { flex-direction: column; justify-content: center; place-items: center; + gap: var(--space-4); width: 80dvw; max-width: 1900px; - gap: var(--space-4); - min-height: 100vh; - padding-bottom: var(--space-5); - background-color: var(--base-20); @media (max-width: 800px) { width: 100dvw;