@firstnoodle-ui/bui 0.0.13 → 0.0.14

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

@@ -1,399 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-<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

@@ -1,46 +0,0 @@
-<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

@@ -1,81 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-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

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

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

@@ -1,113 +0,0 @@
-<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",
-    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

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