christy-richtext 1.0.0 → 1.1.0

package/LICENSE

@@ -1,21 +1,36 @@
-MIT License
+Christy Richtext Proprietary License
 
 Copyright (c) 2026 Christy Love (彩虹小馬工作室)
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+All rights reserved.
+
+This software and associated documentation files (the "Software") are proprietary
+and are owned by Christy Love (彩虹小馬工作室).
+
+Permission is granted only to individuals or organizations who have obtained a
+valid license from Christy Love (彩虹小馬工作室) to install and use the Software
+according to the terms of their purchased license.
+
+Unless expressly permitted by a valid written license agreement, you may not:
+
+1. copy, redistribute, sublicense, sell, rent, lease, or transfer the Software;
+2. publish, share, or make the Software available to any third party;
+3. modify, reverse engineer, decompile, or disassemble the Software;
+4. remove or alter any copyright, trademark, license, or proprietary notice;
+5. use the Software in any product, service, or project without a valid license.
+
+A valid license grants the license holder the right to use the Software only
+within the scope defined by the purchased plan, agreement, invoice, or written
+permission provided by Christy Love (彩虹小馬工作室).
+
+The Software is provided "AS IS", without warranty of any kind, express or
+implied, including but not limited to the warranties of merchantability, fitness
+for a particular purpose, and non-infringement.
+
+In no event shall the authors or copyright holders be liable for any claim,
+damages, or other liability, whether in an action of contract, tort, or
+otherwise, arising from, out of, or in connection with the Software or the use
+or other dealings in the Software.
+
+Unauthorized use, copying, distribution, or modification of this Software is
+strictly prohibited and may result in legal action.

package/README.md

@@ -1,42 +1,153 @@
 # christy-richtext
 
-This template should help get you started developing with Vue 3 in Vite.
+`christy-richtext` 是一個基於 Vue 3 的富文字編輯器元件，適合用在後台管理系統、文章編輯、公告內容、商品描述等需要輸入格式化文字的場景。
 
-## Recommended IDE Setup
+## Features
 
-[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+* 支援 Vue 3
+* 支援 TypeScript
+* 支援 `v-model`
+* 可作為表單輸入元件使用
+* 適合 Vite / Vue 專案使用
 
-## Recommended Browser Setup
+## Installation
 
-- Chromium-based browsers (Chrome, Edge, Brave, etc.):
-  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
-  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
-- Firefox:
-  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
-  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+使用 npm 安裝：
 
-## Type Support for `.vue` Imports in TS
+```sh
+npm install christy-richtext
+```
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import ChristyRichtext from 'christy-richtext'
+
+// 控制富文字編輯器的 HTML 內容
+const content = ref('<p>Hello christy-richtext</p>')
+</script>
+
+<template>
+  <!-- 富文字編輯器，使用 v-model 綁定內容 -->
+  <ChristyRichtext v-model="content" />
+
+  <!-- 預覽目前輸出的 HTML 內容 -->
+  <div v-html="content"></div>
+</template>
+```
+
+## Props
+
+| Prop         | Type     | Default | Description    |
+| ------------ | -------- | ------- | -------------- |
+| `modelValue` | `string` | `''`    | 編輯器目前的 HTML 內容 |
+
+## Emits
+
+| Event               | Payload  | Description |
+| ------------------- | -------- | ----------- |
+| `update:modelValue` | `string` | 當編輯器內容變更時觸發 |
+
+## Example
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import ChristyRichtext from 'christy-richtext'
+
+// 控制公告內容
+const announcementContent = ref('')
+
+// 模擬送出公告內容
+const submit = () => {
+  console.log('公告內容：', announcementContent.value)
+}
+</script>
+
+<template>
+  <section>
+    <h2>新增公告</h2>
+
+    <!-- 公告內容輸入區 -->
+    <ChristyRichtext v-model="announcementContent" />
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+    <!-- 送出按鈕 -->
+    <button type="button" @click="submit">
+      送出
+    </button>
+  </section>
+</template>
+```
+
+## Usage in Nuxt
+
+如果你要在 Nuxt 專案中使用，建議使用 `<ClientOnly>` 包起來，避免富文字編輯器在伺服器端渲染時遇到瀏覽器 API 錯誤。
 
-## Customize configuration
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import ChristyRichtext from 'christy-richtext'
 
-See [Vite Configuration Reference](https://vite.dev/config/).
+// 控制富文字內容
+const content = ref('')
+</script>
+
+<template>
+  <ClientOnly>
+    <ChristyRichtext v-model="content" />
+  </ClientOnly>
+</template>
+```
 
-## Project Setup
+## Development
+
+安裝專案依賴：
 
 ```sh
 npm install
 ```
 
-### Compile and Hot-Reload for Development
+啟動開發環境：
 
 ```sh
 npm run dev
 ```
 
-### Type-Check, Compile and Minify for Production
+建置專案：
 
 ```sh
 npm run build
 ```
+
+執行型別檢查：
+
+```sh
+npm run type-check
+```
+
+## Project Structure
+
+```txt
+christy-richtext/
+├─ src/
+│  ├─ components/
+│  │  └─ ChristyRichtext.vue
+│  ├─ index.ts
+│  └─ style.css
+├─ package.json
+├─ README.md
+├─ tsconfig.json
+└─ vite.config.ts
+```
+
+## Notes
+
+如果你在頁面上使用 `v-html` 顯示富文字內容，請注意 HTML 內容來源是否可信。
+
+若內容來自使用者輸入，建議在後端或前端進行 HTML 清理，避免 XSS 攻擊。
+
+## License
+
+MIT

package/dist-lib/christy-richtext.css

@@ -1,4 +1,59 @@
 
+.crt-img-nv[data-v-2f71d5d7] {
+  /* 定位由 outerStyle 動態注入 */
+}
+.crt-img-container[data-v-2f71d5d7] {
+  user-select: none;
+}
+.crt-img-el[data-v-2f71d5d7] {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  transition: opacity 0.15s;
+}
+.crt-img-el--selected[data-v-2f71d5d7] {
+  outline: 2px solid #2563eb;
+  outline-offset: 1px;
+}
+
+/* 移動 icon（自由浮動模式） */
+.crt-move-handle[data-v-2f71d5d7] {
+  position: absolute;
+  top: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #2563ebcc;
+  color: #fff;
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 0 6px 1px;
+  cursor: move;
+  user-select: none;
+  z-index: 20;
+  line-height: 1.6;
+}
+
+/* Resize handles */
+.crt-rh[data-v-2f71d5d7] {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #2563eb;
+  border: 2px solid #fff;
+  border-radius: 2px;
+  z-index: 10;
+  box-shadow: 0 1px 3px rgba(0,0,0,.25);
+}
+.crt-rh--nw[data-v-2f71d5d7] { top: -5px;    left: -5px;    cursor: nw-resize;
+}
+.crt-rh--ne[data-v-2f71d5d7] { top: -5px;    right: -5px;   cursor: ne-resize;
+}
+.crt-rh--sw[data-v-2f71d5d7] { bottom: -5px; left: -5px;    cursor: sw-resize;
+}
+.crt-rh--se[data-v-2f71d5d7] { bottom: -5px; right: -5px;   cursor: se-resize;
+}
+
 /* === Wrapper === */
 .crt-editor-wrapper {
   display: flex;
@@ -44,6 +99,37 @@
 .crt-input-width:focus {
   border-color: #2563eb;
 }
+
+/* 透明度滑桿 */
+.crt-input-opacity {
+  width: 80px;
+  height: 4px;
+  cursor: pointer;
+  accent-color: #2563eb;
+}
+.crt-opacity-val {
+  font-size: 11px;
+  color: #6b7280;
+  min-width: 28px;
+  text-align: right;
+}
+
+/* 自由浮動按鈕 */
+.crt-btn--free {
+  background: #fdf4ff;
+  color: #7e22ce;
+  border: 1px solid #e9d5ff;
+  font-size: 12px;
+  padding: 0 8px;
+}
+.crt-btn--free:hover:not(:disabled) {
+  background: #f3e8ff;
+}
+.crt-btn--free.crt-btn--active {
+  background: #7e22ce;
+  color: #fff;
+  border-color: #7e22ce;
+}
 .crt-btn--word {
   background: #f0fdf4;
   color: #15803d;
@@ -239,6 +325,7 @@
   min-height: 200px;
   outline: none;
   overflow-y: auto;
+  position: relative;
 }
 .crt-editor-content .tiptap {
   outline: none;
@@ -246,6 +333,7 @@
   font-size: 15px;
   line-height: 1.7;
   color: #111827;
+  position: relative;
 }
 
 /* 文繞圖 clearfix */
@@ -255,7 +343,7 @@
   clear: both;
 }
 
-/* 選取圖片 highlight */
+/* 選取圖片 highlight（NodeView 接管後已由 selected prop 控制，保留備用） */
 .crt-editor-content .tiptap img.ProseMirror-selectednode {
   outline: 2px solid #2563eb;
   outline-offset: 2px;
@@ -383,6 +471,7 @@
   min-height: 200px;
   outline: none;
   overflow-y: auto;
+  position: relative;
 }
 .crt-editor-content .tiptap {
   outline: none;
@@ -390,6 +479,7 @@
   font-size: 15px;
   line-height: 1.7;
   color: #111827;
+  position: relative;
 }
 
 /* 文繞圖 clearfix */
@@ -399,7 +489,7 @@
   clear: both;
 }
 
-/* 選取圖片 highlight */
+/* 選取圖片 highlight（NodeView 接管後已由 selected prop 控制，保留備用） */
 .crt-editor-content .tiptap img.ProseMirror-selectednode {
   outline: 2px solid #2563eb;
   outline-offset: 2px;
@@ -491,6 +581,7 @@
   min-height: 200px;
   outline: none;
   overflow-y: auto;
+  position: relative;
 }
 .crt-editor-content .tiptap {
   outline: none;
@@ -498,6 +589,7 @@
   font-size: 15px;
   line-height: 1.7;
   color: #111827;
+  position: relative;
 }
 
 /* 文繞圖 clearfix */
@@ -507,7 +599,7 @@
   clear: both;
 }
 
-/* 選取圖片 highlight */
+/* 選取圖片 highlight（NodeView 接管後已由 selected prop 控制，保留備用） */
 .crt-editor-content .tiptap img.ProseMirror-selectednode {
   outline: 2px solid #2563eb;
   outline-offset: 2px;