openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
KuroSago 2025-07-10 15:55:09 +08:00
parent 5c042b5d53
commit fd19e680f8
5 changed files with 31 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web3/apps/web/src/views/tiptap/index.vue
View File

@ -1,9 +1,10 @@
<template>
<div>
<ThemeToggle />
<TiptapEditor />
</div>
</template>
<script lang="ts" setup>
import { TiptapEditor } from "@tiptap/component";
import { TiptapEditor, ThemeToggle } from "@tiptap/component";
</script>

70
web3/packages/tiptap/src/components/AppHeader.vue
View File

@ -1,70 +0,0 @@
<template>
<header
class="border-grid w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
>
<div class="container sticky flex items-center h-14">
<div class="hidden mr-4 md:mr-1 md:flex">
<a
href="/"
class="flex items-center mr-4 md:mr-2 lg:mr-6 lg:space-x1 xl:space-x-2"
>
<svg
viewBox="0 0 24 24"
width="24"
height="24"
class="mr-2"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 7v10" />
<path d="M8 9v6" opacity="0.7" />
<path d="M4 11v2" opacity="0.4" />
<path d="M16 9v6" opacity="0.7" />
<path d="M20 11v2" opacity="0.4" />
<rect
x="10"
y="5"
width="4"
height="14"
fill="currentColor"
opacity="0.1"
/>
</svg>
<span class="font-bold"> Echo Editor </span>
</a>
<nav class="flex items-center gap-4 text-sm xl:gap-6"></nav>
</div>
<div
class="flex items-center justify-between flex-1 space-x-2 md:justify-end"
>
<div class="flex-1 w-full md:w-auto md:flex-none"></div>
<nav class="flex items-center gap-0.5">
<a
class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground w-8 h-8"
href="https://github.com/Seedsa/echo-editor"
target="_blank"
><svg
viewBox="0 0 15 15"
width="1.2em"
height="1.2em"
class="w-4 h-4"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M7.5.25a7.25 7.25 0 0 0-2.292 14.13c.363.066.495-.158.495-.35c0-.172-.006-.628-.01-1.233c-2.016.438-2.442-.972-2.442-.972c-.33-.838-.805-1.06-.805-1.06c-.658-.45.05-.441.05-.441c.728.051 1.11.747 1.11.747c.647 1.108 1.697.788 2.11.602c.066-.468.254-.788.46-.969c-1.61-.183-3.302-.805-3.302-3.583a2.8 2.8 0 0 1 .747-1.945c-.075-.184-.324-.92.07-1.92c0 0 .61-.194 1.994.744A7 7 0 0 1 7.5 3.756A7 7 0 0 1 9.315 4c1.384-.938 1.992-.743 1.992-.743c.396.998.147 1.735.072 1.919c.465.507.745 1.153.745 1.945c0 2.785-1.695 3.398-3.31 3.577c.26.224.492.667.492 1.343c0 .97-.009 1.751-.009 1.989c0 .194.131.42.499.349A7.25 7.25 0 0 0 7.499.25"
clip-rule="evenodd"
></path></svg></a
><ThemeToggle />
</nav>
</div>
</div>
</header>
</template>
<script setup lang="ts">
import { ThemeToggle } from "echo-editor";
</script>

2
web3/packages/tiptap/src/components/HtmlOutput.vue
View File

@ -9,6 +9,6 @@
<script setup lang="ts">
defineProps<{
content: string;
content: any;
}>();
</script>

4
web3/packages/tiptap/src/index.ts
View File

@ -1,3 +1,5 @@
import TiptapEditor from "./views/index.vue";
export { TiptapEditor };
import { ThemeToggle } from "echo-editor";
export { TiptapEditor, ThemeToggle };

54
web3/packages/tiptap/src/views/index.vue
View File

@ -1,41 +1,37 @@
<template>
<div class="min-h-screen bg-background">
<AppHeader />
<EditorActions
:minimal="minimal"
:hide-toolbar="hideToolbar"
:hide-menubar="hideMenubar"
:disabled="disabled"
@toggle-minimal="toggleMinimal"
@toggle-toolbar="hideToolbar = !hideToolbar"
@toggle-menubar="hideMenubar = !hideMenubar"
@toggle-editable="disabled = !disabled"
/>
<div class="my-0 mx-auto max-w-[1024px] p-6">
<EditorActions
:minimal="minimal"
:hide-toolbar="hideToolbar"
:hide-menubar="hideMenubar"
:disabled="disabled"
@toggle-minimal="toggleMinimal"
@toggle-toolbar="hideToolbar = !hideToolbar"
@toggle-menubar="hideMenubar = !hideMenubar"
@toggle-editable="disabled = !disabled"
/>
<div class="border rounded-lg shadow-sm bg-card text-card-foreground">
<echo-editor
v-model="content"
:extensions="extensions"
:hideToolbar="hideToolbar"
:hideMenubar="hideMenubar || minimal"
:key="minimal ? 'minimal' : 'full'"
:disabled="disabled"
:maxHeight="512"
output="html"
:dark="theme === 'dark'"
>
</echo-editor>
</div>
<HtmlOutput :content="content" />
</div>
<echo-editor
v-model="content"
:extensions="extensions"
:hideToolbar="hideToolbar"
:hideMenubar="hideMenubar || minimal"
:key="minimal ? 'minimal' : 'full'"
:disabled="disabled"
:maxHeight="512"
output="html"
v-model:theme="theme"
:dark="theme === 'dark'"
/>
<HtmlOutput :content="content" />
minimal : {{ minimal }}
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { EchoEditor } from "echo-editor";
import { DEMO_CONTENT } from "./initContent";
import AppHeader from "../components/AppHeader.vue";
import EditorActions from "../components/EditorActions.vue";
import HtmlOutput from "../components/HtmlOutput.vue";
import { useEditorConfig } from "../components/useEditorConfig";