@firstnoodle-ui/bui 0.0.26 → 0.0.28

package/src/components/text-editor/TextEditor.vue

@@ -0,0 +1,399 @@
+<script setup lang="ts">
+import type { TIcon } from "../types";
+import bold from "@tiptap/extension-bold";
+import bulletList from "@tiptap/extension-bullet-list";
+import Document from "@tiptap/extension-document";
+import heading from "@tiptap/extension-heading";
+import highlight from "@tiptap/extension-highlight";
+
+import history from "@tiptap/extension-history";
+
+import italic from "@tiptap/extension-italic";
+
+import link from "@tiptap/extension-link";
+import listItem from "@tiptap/extension-list-item";
+
+import orderedList from "@tiptap/extension-ordered-list";
+import Paragraph from "@tiptap/extension-paragraph";
+import Placeholder from "@tiptap/extension-placeholder";
+import Text from "@tiptap/extension-text";
+import underline from "@tiptap/extension-underline";
+import { EditorContent, useEditor } from "@tiptap/vue-3";
+
+import { computed, onBeforeUnmount, ref } from "vue";
+import { BFlexbox, BIcon } from "../";
+import { useClickOutside } from "../../";
+import FormattingButton from "./components/FormattingButton.vue";
+
+import InsertLinkDialog from "./components/InsertLinkDialog.vue";
+import InsertTextDialog from "./components/InsertTextDialog.vue";
+
+const props = withDefaults(
+  defineProps<{
+    autoHideMenu?: boolean;
+    embedded?: boolean;
+    content: string;
+    editorContentClasses?: string;
+    editorContentFocusClasses?: string;
+    emphasis?: boolean;
+    expandVertically?: boolean;
+    headerIcon?: TIcon;
+    headerLabel?: string;
+    heading?: boolean;
+    highlight?: boolean;
+    history?: boolean;
+    insert?: boolean;
+    insertIcon?: TIcon;
+    insertLabel?: string;
+    insertTooltip?: string;
+    link?: boolean;
+    listStyles?: boolean;
+    minimal?: boolean;
+    placeholder?: string;
+    showMenu?: boolean;
+  }>(),
+  {
+    autoHideMenu: false,
+    editorContentClasses: "p-2 bg-1",
+    editorContentFocusClasses: "p-2 bg-1",
+    embedded: false,
+    emphasis: false,
+    expandVertically: false,
+    heading: false,
+    highlight: false,
+    history: false,
+    insert: false,
+    insertIcon: "download",
+    insertLabel: "Insert text",
+    insertTooltip: "Insert text",
+    link: false,
+    listStyles: false,
+    minimal: false,
+    showMenu: undefined,
+  },
+);
+
+const emit = defineEmits(["blur", "change", "focus"]);
+
+const editorFocussed = ref(false);
+const softFocus = ref(false);
+const showInsertTextDialog = ref(false);
+const showLinkDialog = ref(false);
+const editorRef = ref<HTMLDivElement>();
+
+const { disableClickOutside, enableClickOutside } = useClickOutside(() => (softFocus.value = false));
+
+const editor = useEditor({
+  content: props.content,
+  extensions: [
+    bold,
+    bulletList,
+    heading,
+    highlight,
+    history,
+    italic,
+    link,
+    listItem,
+    orderedList,
+    underline,
+    Document,
+    Paragraph,
+    Text,
+    Placeholder.configure({
+      placeholder: props.placeholder || "",
+    }),
+  ],
+  onCreate: () => {
+    if (editorRef.value) {
+      enableClickOutside([editorRef.value]);
+    }
+  },
+  onUpdate: ({ editor }) => emit("change", editor.getHTML()),
+  onFocus: () => {
+    editorFocussed.value = softFocus.value = true;
+    emit("focus");
+  },
+  onBlur: () => {
+    editorFocussed.value = false;
+    emit("blur");
+  },
+});
+
+onBeforeUnmount(() => disableClickOutside());
+
+const menuVisible = computed(() => {
+  if (props.showMenu !== undefined) return props.showMenu;
+  return softFocus.value || !props.autoHideMenu;
+});
+
+const headerClass = computed(() => {
+  return softFocus.value ? "bg-1 border-b border-default opacity-100" : "bg-2 border-b border-subtle opacity-50";
+});
+
+const menuClass = computed(() => {
+  return softFocus.value ? "bg-2 border-t border-default opacity-100" : "bg-2 border-t border-subtle opacity-50";
+});
+
+const focusPositions = ["start", "end", "all"] as const;
+type TFocusPosition = (typeof focusPositions)[number];
+
+const focus = (position: TFocusPosition) => {
+  const validatedPosition = focusPositions.includes(position) ? position : "end";
+  editor.value?.commands.focus(validatedPosition);
+};
+
+const blur = () => {
+  editor.value?.commands.blur();
+  softFocus.value = false;
+};
+
+const onCancelInsertLink = () => (showLinkDialog.value = false);
+const onEditorMenuClick = () => (softFocus.value = true);
+const onLinkInserted = () => (showLinkDialog.value = false);
+const insertContent = (value: string) => editor.value?.commands.insertContent(value);
+const onInsertText = (value: string) => {
+  insertContent(value);
+  showInsertTextDialog.value = false;
+};
+const onAddLink = () => (showLinkDialog.value = true);
+const onAddText = () => (showInsertTextDialog.value = true);
+
+/**
+ * For parent component
+ */
+const closeInsert = () => (showInsertTextDialog.value = false);
+const setContent = (value: string) => editor.value?.commands.setContent(value);
+
+defineExpose({ blur, closeInsert, focus, setContent });
+</script>
+
+<template>
+  <section v-if="editor" ref="editorRef" class="relative w-full">
+    <BFlexbox
+      col
+      align="stretch"
+      class="relative rounded-lg font-normal focus-within:border-default"
+      :class="{
+        'border': !embedded,
+        'flex-1 min-h-0': expandVertically,
+        'shadow-sm-outline border-action': softFocus,
+        'border-transparent': !softFocus && embedded,
+        'border-subtle': !softFocus && !embedded,
+      }"
+    >
+      <BFlexbox
+        v-if="headerLabel || headerIcon"
+        tag="header"
+        class="flex-0 h-10 px-3 gap-2 text-sm text-primary rounded-t-lg overflow-hidden"
+        :class="headerClass"
+      >
+        <BIcon v-if="headerIcon" :name="headerIcon" />
+        <span v-if="headerLabel">{{ headerLabel }}</span>
+      </BFlexbox>
+      <BFlexbox tag="main" align="start" fullwidth>
+        <EditorContent
+          class="flex-1 overflow-y-auto rounded-t-lg focus:outline-hidden"
+          :class="{
+            [editorContentClasses]: !softFocus,
+            [editorContentFocusClasses]: softFocus,
+          }"
+          :editor="editor"
+        />
+      </BFlexbox>
+      <nav v-if="menuVisible" class="flex-0 min-h-0 p-1 rounded-b-lg overflow-hidden" :class="menuClass">
+        <BFlexbox justify="between">
+          <BFlexbox class="gap-0.5">
+            <template v-if="history">
+              <FormattingButton
+                icon="undo"
+                tooltip="Undo"
+                @click="
+                  editor!.chain().focus().undo().run();
+                  onEditorMenuClick();
+                "
+              />
+              <FormattingButton
+                icon="redo"
+                tooltip="Redo"
+                @click="
+                  editor!.chain().focus().redo().run();
+                  onEditorMenuClick();
+                "
+              />
+            </template>
+            <template v-if="emphasis">
+              <FormattingButton
+                icon="bold"
+                tooltip="Bold"
+                :active="editor.isActive('bold')"
+                @click="
+                  editor!.chain().focus().toggleBold().run();
+                  onEditorMenuClick();
+                "
+              />
+              <FormattingButton
+                icon="italics"
+                tooltip="Italic"
+                :active="editor.isActive('italic')"
+                @click="
+                  editor!.chain().focus().toggleItalic().run();
+                  onEditorMenuClick();
+                "
+              />
+              <FormattingButton
+                icon="underline"
+                tooltip="Underline"
+                :active="editor.isActive('underline')"
+                @click="
+                  editor!.chain().focus().toggleUnderline().run();
+                  onEditorMenuClick();
+                "
+              />
+            </template>
+            <FormattingButton
+              v-if="highlight"
+              icon="square-solid"
+              tooltip="Yellow highlight"
+              :active="editor.isActive('highlight')"
+              @click="
+                editor!.chain().focus().toggleHighlight().run();
+                onEditorMenuClick();
+              "
+            />
+            <FormattingButton
+              v-if="heading"
+              icon="heading"
+              tooltip="Heading"
+              :active="editor.isActive('heading', { level: 1 })"
+              @click="
+                editor!.chain().focus().toggleHeading({ level: 1 }).run();
+                onEditorMenuClick();
+              "
+            />
+            <FormattingButton
+              v-if="link"
+              icon="link"
+              tooltip="Add link"
+              :active="editor.isActive('link')"
+              @click="
+                onAddLink();
+                onEditorMenuClick();
+              "
+            />
+            <template v-if="listStyles">
+              <FormattingButton
+                icon="bullet-list"
+                tooltip="Bullet list"
+                :active="editor.isActive('bulletList')"
+                @click="
+                  editor!.chain().focus().toggleBulletList().run();
+                  onEditorMenuClick();
+                "
+              />
+              <FormattingButton
+                icon="numbered-list"
+                tooltip="Numbered list"
+                :active="editor.isActive('orderedList')"
+                @click="
+                  editor!.chain().focus().toggleOrderedList().run();
+                  onEditorMenuClick();
+                "
+              />
+              <FormattingButton
+                icon="indent-right"
+                tooltip="Indent right"
+                :disabled="Boolean(!editor.can().sinkListItem('listItem'))"
+                @click="
+                  editor!.chain().focus().sinkListItem('listItem').run();
+                  onEditorMenuClick();
+                "
+              />
+              <FormattingButton
+                icon="indent-left"
+                tooltip="Indent left"
+                :disabled="Boolean(!editor.can().liftListItem('listItem'))"
+                @click="
+                  editor!.chain().focus().liftListItem('listItem').run();
+                  onEditorMenuClick();
+                "
+              />
+            </template>
+            <FormattingButton
+              v-if="insert"
+              highlight
+              :icon="insertIcon"
+              :tooltip="insertTooltip"
+              :active="editor.isActive('insert')"
+              @click="
+                onAddText();
+                onEditorMenuClick();
+              "
+            />
+          </BFlexbox>
+          <div v-if="$slots.menuRight" class="pr-1">
+            <slot name="menuRight" />
+          </div>
+        </BFlexbox>
+      </nav>
+
+      <InsertLinkDialog v-if="showLinkDialog" :editor="editor" @inserted="onLinkInserted" @cancel="onCancelInsertLink" />
+
+      <template v-if="showInsertTextDialog">
+        <slot v-if="$slots.insert" name="insert" />
+        <InsertTextDialog v-else @insert="onInsertText" @cancel="showInsertTextDialog = false" />
+      </template>
+    </BFlexbox>
+  </section>
+</template>
+
+<style>
+.ProseMirror {
+  height: 100%;
+}
+.ProseMirror:focus {
+  outline: none;
+}
+
+/* Render blank line */
+.ProseMirror p:empty::after {
+  content: "\00A0";
+}
+
+.ProseMirror a {
+  color: blue;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* Unordered (bullet) lists */
+.ProseMirror ul {
+  margin-left: 30px;
+}
+.ProseMirror ul li {
+  list-style: circle;
+  list-style-position: outside;
+}
+.ProseMirror ul li > p {
+  display: inline;
+}
+
+/* Ordered (numbered) lists */
+.ProseMirror ol {
+  margin-left: 30px;
+}
+.ProseMirror ol li {
+  list-style: decimal;
+  list-style-position: outside;
+}
+.ProseMirror ol li > p {
+  display: inline;
+}
+
+.tiptap p.is-editor-empty:first-child::before {
+  color: #adb5bd;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+</style>

package/src/components/text-editor/components/Dialog.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Teleport to="#modals">
+    <div class="pointer-events-auto absolute top-0 left-0 w-full h-full flex items-center justify-center rounded-sm bg-black/15">
+      <div class="px-8 py-6 bg-1 rounded-lg shadow-sm-xl space-y-2">
+        <slot />
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/components/text-editor/components/FormattingButton.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { TIcon } from "../../types";
+import { BFlexbox, BIcon, BTooltip } from "../../";
+
+withDefaults(
+  defineProps<{
+    active?: boolean;
+    disabled?: boolean;
+    highlight?: boolean;
+    icon?: TIcon;
+    label?: string;
+    tooltip?: string;
+  }>(),
+  {
+    active: false,
+    disabled: false,
+    highlight: false,
+  },
+);
+
+const emit = defineEmits(["click"]);
+</script>
+
+<template>
+  <BTooltip :text="tooltip" :delay="200">
+    <BFlexbox
+      tag="button"
+      inline
+      justify="center"
+      class="h-8 gap-2 rounded-lg border border-transparent focus:outline-hidden focus:border-strong"
+      :class="{
+        'bg-4 text-primary font-bold': active && !highlight,
+        'bg-4 text-action border border-subtle': highlight,
+        'text-tertiary bg-transparent': !active && !disabled && !highlight,
+        'hover:bg-5': !disabled,
+        'text-muted': disabled && !highlight,
+        'w-8': icon && !label,
+        'px-2': label,
+      }"
+      @click.stop.prevent="!disabled && emit('click')"
+    >
+      <BIcon v-if="icon" :name="icon" />
+      <span v-if="label" class="text-xs leading-none">{{ label }}</span>
+    </BFlexbox>
+  </BTooltip>
+</template>

package/src/components/text-editor/components/InsertLinkDialog.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { onBeforeMount, onMounted, ref } from "vue";
+import { BConfirmCancel, BInput } from "../../";
+import TextEditorDialog from "./Dialog.vue";
+
+const props = defineProps<{ editor: any }>();
+const emit = defineEmits(["cancel", "inserted"]);
+const linkAddress = ref<string | null>(null);
+const linkDisplayName = ref<string | null>(null);
+
+const inputRef = ref<typeof BInput>();
+
+const onAddLink = () => {
+  // get the current link if any
+  linkAddress.value = props.editor.getAttributes("link").href;
+
+  const { view, state } = props.editor;
+
+  if (linkAddress.value) {
+    /**
+     * If there is a link address, there must be a display name.
+     * But there is no simple way to get the display name.
+     * This is solved by looking at the parent content of the cursor position
+     * and find the content where the link is added
+     *
+     * The parent content is the line where cursor is broken down into blocks
+     */
+    const relevantTextNodes = view.state.selection.ranges[0].$from.parent.content.content.filter(
+      (c: any) => c.marks.length > 0 && c.marks[0].attrs.href === linkAddress.value,
+    );
+
+    linkDisplayName.value = relevantTextNodes[0].text;
+  }
+  else {
+    // get the selected text as the display name
+    const { from, to } = view.state.selection;
+    linkDisplayName.value = state.doc.textBetween(from, to, "");
+  }
+};
+
+onBeforeMount(() => onAddLink());
+onMounted(() => inputRef.value!.focus());
+
+// TODO use define model
+const onAddressChange = (value: string) => (linkAddress.value = value);
+const onDisplayNameChange = (value: string) => (linkDisplayName.value = value);
+
+const onInsert = () => {
+  if (linkAddress.value && !linkAddress.value.includes("http")) {
+    linkAddress.value = `https://${linkAddress.value}`;
+  }
+
+  if (linkAddress.value) {
+    props.editor.chain().focus().extendMarkRange("link").setLink({ href: linkAddress.value }).run();
+
+    const transaction = props.editor.state.tr.insertText(linkDisplayName.value);
+    props.editor.view.dispatch(transaction);
+
+    emit("inserted");
+  }
+};
+</script>
+
+<template>
+  <TextEditorDialog>
+    <header>Insert link</header>
+    <section class="space-y-1">
+      <div class="text-xs text-secondary">
+        Text to display
+      </div>
+      <BInput ref="inputRef" placeholder="Text to display" :value="linkDisplayName || ''" @change="onDisplayNameChange" />
+    </section>
+    <section class="space-y-1">
+      <div class="text-xs text-secondary">
+        Address
+      </div>
+      <BInput placeholder="Link to a web page" :value="linkAddress || ''" @change="onAddressChange" />
+    </section>
+    <BConfirmCancel confirm-label="Insert" @confirm="onInsert" @cancel="emit('cancel')" />
+  </TextEditorDialog>
+</template>

package/src/components/text-editor/components/InsertTextDialog.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { BConfirmCancel, BInput } from "../../";
+import TextEditorDialog from "./Dialog.vue";
+
+const emit = defineEmits(["cancel", "insert"]);
+const textToBeInserted = ref<string | null>(null);
+const inputRef = ref<typeof BInput>();
+
+onMounted(() => inputRef.value!.focus());
+
+const onCancelInsert = () => {
+  emit("cancel");
+  textToBeInserted.value = null;
+};
+
+// TODO use defineModel
+const onInputChange = (value: string) => (textToBeInserted.value = value);
+
+const onInsert = () => {
+  emit("insert", textToBeInserted.value);
+  textToBeInserted.value = null;
+};
+</script>
+
+<template>
+  <TextEditorDialog>
+    <header>Insert text</header>
+    <section class="space-y-1">
+      <BInput ref="inputRef" placeholder="Text to be inserted" :value="textToBeInserted || ''" @change="onInputChange" />
+    </section>
+    <div class="flex flex-1 justify-end">
+      <BConfirmCancel confirm-label="Insert" @confirm="onInsert" @cancel="onCancelInsert" />
+    </div>
+  </TextEditorDialog>
+</template>

package/src/components/text-editor/components/index.ts

@@ -0,0 +1,3 @@
+export { default as FormattingButton } from "./FormattingButton.vue";
+export { default as InsertLinkDialog } from "./InsertLinkDialog.vue";
+export { default as InsertTextDialog } from "./InsertTextDialog.vue";

package/src/components/text-editor/index.ts

@@ -0,0 +1 @@
+export { default as BTextEditor } from "./TextEditor.vue";

package/src/components/text-highlight/TextHighlight.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref, watch } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    value: string;
+    highlight?: string | null;
+    bold?: boolean;
+    underline?: boolean;
+    textColorClass?: string;
+    backgroundColor?: "yellow" | "green" | "blue" | "red" | "pink" | "white" | null;
+  }>(),
+  {
+    highlight: null,
+    bold: false,
+    underline: false,
+    textColorClass: "text-primary dark:text-black",
+    backgroundColor: null,
+  },
+);
+
+const segments = ref<string[]>([]);
+
+const highlightColorClasses = computed(() => {
+  if (!props.backgroundColor) return "";
+
+  const base = "ring-2 shadow-sm ";
+  switch (props.backgroundColor) {
+    case "yellow":
+      return `${base}bg-yellow-500 ring-yellow-500`;
+    case "green":
+      return `${base}bg-green-500 ring-green-500`;
+    case "blue":
+      return `${base}bg-blue-500 ring-blue-500`;
+    case "red":
+      return `${base}bg-red-500 ring-red-500`;
+    case "pink":
+      return `${base}bg-pink-500 ring-pink-500`;
+    case "white":
+      return `${base}bg-white ring-white`;
+    default:
+      return `${base}bg-yellow-500 ring-yellow-500`;
+  }
+});
+
+const segmentiseString = (targetString: string, searchString: string) => {
+  if (!targetString || !searchString) return [];
+  if (typeof targetString !== "string" || typeof searchString !== "string") return [];
+
+  const lowerCasedTargetString = targetString.toLowerCase();
+  const lowerCasedSearchString = searchString.toLowerCase();
+
+  const segmentBreakPoints = [];
+  let resultIndex = -1;
+
+  do {
+    resultIndex = lowerCasedTargetString.indexOf(lowerCasedSearchString, resultIndex + 1);
+    if (resultIndex !== -1) {
+      segmentBreakPoints.push(resultIndex, resultIndex + lowerCasedSearchString.length);
+    }
+  } while (resultIndex > -1);
+
+  const segments = [];
+  let segmentIndex = 0;
+
+  for (const highlight of segmentBreakPoints) {
+    segments.push(targetString.substring(segmentIndex, highlight));
+    segmentIndex = highlight;
+  }
+
+  segments.push(targetString.substring(segmentBreakPoints[segmentBreakPoints.length - 1], targetString.length));
+
+  return segments;
+};
+
+onBeforeMount(() => {
+  segments.value = props.highlight ? segmentiseString(props.value, props.highlight) : [];
+});
+
+watch(
+  () => props.highlight,
+  (newValue: string | null) => {
+    segments.value = newValue ? segmentiseString(props.value, newValue) : [];
+  },
+);
+</script>
+
+<template>
+  <span class="relative z-0">
+    <template v-if="segments.length === 0">
+      {{ value }}
+    </template>
+    <template v-for="segment in segments" v-else :key="segment">
+      <span
+        v-if="highlight && segment.toLowerCase() === highlight.toLowerCase()"
+        class="relative z-0 rounded"
+        :class="[
+          {
+            'font-bold': bold,
+            'underline': underline,
+          },
+          highlightColorClasses,
+          textColorClass,
+        ]"
+      >
+        {{ segment }}
+      </span>
+      <span v-else class="relative z-10">
+        {{ segment }}
+      </span>
+    </template>
+  </span>
+</template>

package/src/components/text-highlight/index.ts

@@ -0,0 +1 @@
+export { default as BTextHighlight } from "./TextHighlight.vue";