@umbra.ui/core 0.2.0 → 0.4.0

package/dist/components/inputs/AutogrowRichTextView/AutogrowRichTextView.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { EditorContent, useEditor } from "@tiptap/vue-3";
+import StarterKit from "@tiptap/starter-kit";
+import { Markdown } from "@tiptap/markdown";
+import Highlight from "@tiptap/extension-highlight";
+import Placeholder from "@tiptap/extension-placeholder";
+import Underline from "@tiptap/extension-underline";
+import "./theme.css";
+import "./editor.css";
+
+export interface Props {
+  text?: string;
+  placeholder?: string;
+}
+
+const emit = defineEmits(["update:text", "onBlur"]);
+
+const props = withDefaults(defineProps<Props>(), {
+  text: "",
+  placeholder: "Start writing...",
+});
+
+const isUpdatingFromProps = ref(false);
+
+type MarkdownEditor = {
+  getJSON: () => unknown;
+  storage?: {
+    markdown?: {
+      getMarkdown?: () => string;
+      serialize?: (doc: unknown) => string;
+    };
+  };
+};
+
+const getMarkdownFromEditor = (activeEditor: MarkdownEditor) => {
+  const storage = activeEditor.storage?.markdown;
+  if (storage?.getMarkdown) {
+    return storage.getMarkdown();
+  }
+  if (storage?.serialize) {
+    return storage.serialize(activeEditor.getJSON());
+  }
+  return "";
+};
+
+const editor = useEditor({
+  content: props.text,
+  contentType: "markdown",
+  extensions: [
+    StarterKit,
+    Markdown,
+    Highlight,
+    Underline,
+    Placeholder.configure({
+      placeholder: props.placeholder,
+    }),
+  ],
+  editorProps: {
+    attributes: {
+      class: "tiptap",
+      spellcheck: "true",
+    },
+  },
+  onUpdate: ({ editor: activeEditor }: { editor: MarkdownEditor }) => {
+    if (isUpdatingFromProps.value) {
+      return;
+    }
+    const markdown = getMarkdownFromEditor(activeEditor);
+    emit("update:text", markdown);
+  },
+  onBlur: ({ editor: activeEditor }: { editor: MarkdownEditor }) => {
+    const markdown = getMarkdownFromEditor(activeEditor);
+    emit("onBlur", markdown);
+  },
+});
+
+const editorMarkdown = computed(() =>
+  editor.value ? getMarkdownFromEditor(editor.value) : ""
+);
+
+watch(
+  () => props.text,
+  (newValue) => {
+    if (!editor.value || newValue === editorMarkdown.value) {
+      return;
+    }
+    isUpdatingFromProps.value = true;
+    editor.value.commands.setContent(newValue, false, {
+      contentType: "markdown",
+    });
+    isUpdatingFromProps.value = false;
+  }
+);
+
+onBeforeUnmount(() => {
+  editor.value?.destroy();
+});
+
+const focusEditor = () => {
+  editor.value?.commands.focus();
+};
+</script>
+
+<template>
+  <div :class="$style.container" @click="focusEditor">
+    <EditorContent :editor="editor" :class="$style.editor" />
+  </div>
+</template>
+
+<style module>
+.container {
+  padding: var(--autogrow-padding, 1.176rem);
+  border-radius: var(--autogrow-border-radius, 0.706rem);
+  background-color: var(--autogrow-bg);
+  border: 1px solid var(--autogrow-border);
+  transition: border-color 0.2s ease-in-out;
+  cursor: text;
+}
+
+.container:has(.ProseMirror-focused) {
+  border-color: var(--autogrow-focus-border);
+}
+
+.editor {
+  width: 100%;
+}
+</style>

package/dist/components/inputs/AutogrowRichTextView/README.md

@@ -0,0 +1,86 @@
+# AutogrowRichTextView
+
+A rich text input component that supports Markdown, built with Vue 3 and Tiptap. The editor grows naturally with content and serializes to Markdown for storage or processing.
+
+## Installation/Import
+
+```typescript
+import { AutogrowRichTextView } from "@umbra-ui/core";
+```
+
+**Dependencies:**
+
+- Vue 3.x
+- @tiptap/vue-3
+- @tiptap/starter-kit
+- @tiptap/markdown
+- @tiptap/extension-highlight
+- @tiptap/extension-placeholder
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { AutogrowRichTextView } from "@umbra-ui/core";
+
+const text = ref("# Hello\n\nThis is **markdown**.");
+</script>
+
+<template>
+  <AutogrowRichTextView v-model:text="text" />
+</template>
+```
+
+## Props
+
+| Prop Name     | Type     | Required | Default              | Description                           |
+| ------------- | -------- | -------- | -------------------- | ------------------------------------- |
+| `text`        | `string` | No       | `""`                 | Markdown content for the editor       |
+| `placeholder` | `string` | No       | `"Start writing..."` | Placeholder text displayed when empty |
+
+## Events
+
+| Event Name    | Payload Type | Description                               |
+| ------------- | ------------ | ----------------------------------------- |
+| `update:text` | `string`     | Emitted when the markdown content changes |
+| `onBlur`      | `string`     | Emitted when the editor loses focus       |
+
+## Supported Markdown
+
+- Headings
+- Bold and italic
+- Highlight, underline, and strikethrough
+- Inline code and code blocks
+- Ordered and unordered lists
+- Blockquotes and horizontal rules
+
+## CSS Customization
+
+The component uses CSS custom properties for easy theming:
+
+```css
+/* Base colors */
+--autogrow-bg: #ffffff;
+--autogrow-border: #d9d9d9;
+--autogrow-focus-border: #0090ff;
+--autogrow-text-color: #202020;
+--autogrow-placeholder-color: rgba(26, 29, 35, 0.5);
+
+/* Layout */
+--autogrow-padding: 1.176rem;
+--autogrow-border-radius: 0.706rem;
+
+/* Optional rich-text accents */
+--autogrow-highlight-bg: rgba(255, 214, 10, 0.35);
+--autogrow-code-bg: rgba(0, 0, 0, 0.08);
+--autogrow-codeblock-bg: rgba(0, 0, 0, 0.08);
+--autogrow-quote-border: rgba(0, 144, 255, 0.5);
+--autogrow-divider: rgba(0, 0, 0, 0.12);
+```
+
+## Notes
+
+- Markdown is parsed on load and serialized on update using `@tiptap/markdown`.
+- The editor grows as content increases; no fixed height is applied.
+- The container is clickable to focus the editor.

package/dist/components/inputs/AutogrowRichTextView/editor.css

@@ -0,0 +1,211 @@
+:root {
+  --autogrow-rt-strong: #b4232a;
+  --autogrow-rt-underline: #6f42c1;
+  --autogrow-rt-link: #0077a5;
+  --autogrow-rt-strike: rgba(0, 0, 0, 0.5);
+  --autogrow-rt-mark-bg: #fff2a8;
+  --autogrow-rt-mark-text: #202020;
+  --autogrow-rt-code-bg: #f2f2f2;
+  --autogrow-rt-code-border: #d0d0d0;
+  --autogrow-rt-code-text: #202020;
+  --autogrow-rt-pre-bg: #f2f2f2;
+  --autogrow-rt-pre-border: #d0d0d0;
+  --autogrow-rt-pre-text: #202020;
+  --autogrow-rt-quote-border: #2f9e61;
+  --autogrow-rt-quote-text: #5a5a5a;
+  --autogrow-rt-hr: #d0d0d0;
+  --autogrow-rt-h1: #1f2d5c;
+  --autogrow-rt-h2: #243a78;
+  --autogrow-rt-h3: #2c4aa8;
+  --autogrow-rt-h4: #1f6fa8;
+  --autogrow-rt-h5: #1b76c5;
+  --autogrow-rt-h6: #1e88e5;
+  --autogrow-rt-paragraph: #202020;
+}
+
+.dark,
+.dark-theme {
+  --autogrow-rt-strong: #e5484d;
+  --autogrow-rt-underline: #d19dff;
+  --autogrow-rt-link: #00a2c7;
+  --autogrow-rt-strike: rgba(255, 255, 255, 0.5);
+  --autogrow-rt-mark-bg: #fef6baf6;
+  --autogrow-rt-mark-text: #000000;
+  --autogrow-rt-code-bg: #606060;
+  --autogrow-rt-code-border: #7b7b7b;
+  --autogrow-rt-code-text: #ffffff;
+  --autogrow-rt-pre-bg: #606060;
+  --autogrow-rt-pre-border: #7b7b7b;
+  --autogrow-rt-pre-text: #ffffff;
+  --autogrow-rt-quote-border: #30a46c;
+  --autogrow-rt-quote-text: #b4b4b4;
+  --autogrow-rt-hr: #7b7b7b;
+  --autogrow-rt-h1: #d6e1ff;
+  --autogrow-rt-h2: #9eb1ff;
+  --autogrow-rt-h3: #5472e4;
+  --autogrow-rt-h4: #c2e6ff;
+  --autogrow-rt-h5: #70b8ff;
+  --autogrow-rt-h6: #3b9eff;
+  --autogrow-rt-paragraph: #ffffff;
+}
+
+.tiptap {
+  min-height: 5.882rem;
+  width: 100%;
+  color: var(--autogrow-text-color);
+  outline: none;
+  word-break: break-word;
+}
+
+.tiptap > * + * {
+  margin-top: 0.706rem;
+}
+
+.tiptap p {
+  line-height: 1.5;
+  margin: 0;
+}
+
+.tiptap p.is-editor-empty:first-child::before {
+  color: var(--autogrow-placeholder-color);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.tiptap strong {
+  font-weight: 700;
+  color: var(--autogrow-rt-strong);
+}
+
+.tiptap em {
+  font-style: italic;
+}
+
+.tiptap u {
+  text-decoration: underline;
+  text-decoration-color: var(--autogrow-rt-underline);
+  text-underline-offset: 0.118rem;
+}
+
+.tiptap a {
+  color: var(--autogrow-rt-link);
+  opacity: 1;
+}
+
+.tiptap s {
+  text-decoration: line-through;
+  color: var(--autogrow-rt-strike);
+}
+
+.tiptap mark {
+  background-color: var(--autogrow-rt-mark-bg);
+  color: var(--autogrow-rt-mark-text);
+  padding: 0.118rem 0.235rem;
+}
+
+.tiptap code {
+  background-color: var(--autogrow-rt-code-bg);
+  border: 1px solid var(--autogrow-rt-code-border);
+  border-radius: 0.235rem;
+  font-family: "JetBrains Mono";
+  font-weight: normal;
+  font-size: 0.882rem;
+  color: var(--autogrow-rt-code-text);
+  padding: 0.118rem 0.235rem;
+}
+
+.tiptap pre {
+  background-color: var(--autogrow-rt-pre-bg);
+  border: 1px solid var(--autogrow-rt-pre-border);
+  border-radius: 0.706rem;
+  font-family: "JetBrains Mono";
+  font-weight: normal;
+  font-size: 1rem;
+  color: var(--autogrow-rt-pre-text);
+  padding: 0.882rem;
+  overflow-x: auto;
+}
+
+.tiptap pre code {
+  background: none;
+  color: inherit;
+  font-family: "JetBrains Mono";
+  font-weight: normal;
+  padding: 0;
+  font-size: inherit;
+  border: none;
+}
+
+.tiptap ul,
+.tiptap ol {
+  padding-left: 1.176rem;
+}
+
+.tiptap ul {
+  list-style: disc;
+}
+
+.tiptap ol {
+  list-style: decimal;
+}
+
+.tiptap blockquote {
+  border-left: 0.176rem solid var(--autogrow-rt-quote-border);
+  margin: 0;
+  margin-top: 0.706rem;
+  padding-left: 0.706rem;
+  color: var(--autogrow-rt-quote-text);
+  opacity: 0.85;
+}
+
+.tiptap hr {
+  border: none;
+  border-top: 1px solid var(--autogrow-rt-hr);
+  margin: 1.176rem 0;
+}
+
+.tiptap h1,
+.tiptap h2,
+.tiptap h3,
+.tiptap h4,
+.tiptap h5,
+.tiptap h6 {
+  font-weight: 600;
+}
+
+.tiptap h1 {
+  font-size: 1.765rem;
+  color: var(--autogrow-rt-h1);
+}
+
+.tiptap h2 {
+  font-size: 1.471rem;
+  color: var(--autogrow-rt-h2);
+}
+
+.tiptap h3 {
+  font-size: 1.235rem;
+  color: var(--autogrow-rt-h3);
+}
+
+.tiptap h4 {
+  font-size: 1.118rem;
+  color: var(--autogrow-rt-h4);
+}
+
+.tiptap h5 {
+  font-size: 1rem;
+  color: var(--autogrow-rt-h5);
+}
+
+.tiptap h6 {
+  font-size: 0.941rem;
+  color: var(--autogrow-rt-h6);
+}
+
+.tiptap p {
+  line-height: 1.7;
+  color: var(--autogrow-rt-paragraph);
+}

package/dist/components/inputs/AutogrowRichTextView/theme.css

@@ -0,0 +1,28 @@
+/* Light theme */
+:root {
+  /* AutogrowTextView colors - using primary/default values from original */
+  --autogrow-bg: #ffffff;
+  --autogrow-border: #d9d9d9;
+  --autogrow-focus-border: #0090ff;
+  --autogrow-text-color: #202020;
+  --autogrow-placeholder-color: rgba(26, 29, 35, 0.5);
+
+  /* Customizable properties */
+  --autogrow-padding: 1.176rem;
+  --autogrow-border-radius: 0.706rem;
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* AutogrowTextView colors - using primary/default values from original */
+  --autogrow-bg: #484848;
+  --autogrow-border: #606060;
+  --autogrow-focus-border: #0090ff;
+  --autogrow-text-color: #eeeeee;
+  --autogrow-placeholder-color: rgba(238, 238, 238, 0.5);
+
+  /* Customizable properties */
+  --autogrow-padding: 1.176rem;
+  --autogrow-border-radius: 0.706rem;
+}