Browse Source

add:word选中AI样式

master
prr 7 months ago
parent
commit
d11439cd7e
  1. 3
      packages/word/src/editor/core/range/RangeManager.ts
  2. 1
      packages/word/src/editor/interface/Element.ts
  3. 1
      packages/word/src/editor/interface/Listener.ts
  4. 3
      packages/word/src/plugins/floatingToolbar/enum/index.ts
  5. 15
      packages/word/src/plugins/floatingToolbar/icons/Svgs.ts
  6. 1
      packages/word/src/plugins/floatingToolbar/icons/ai-edit.svg
  7. 108
      packages/word/src/plugins/floatingToolbar/index.ts
  8. 200
      packages/word/src/plugins/floatingToolbar/style/index.scss

3
packages/word/src/editor/core/range/RangeManager.ts

@ -433,6 +433,7 @@ export class RangeManager {
el => !el.underline && !el.control?.underline
)
const strikeout = !~curElementList.findIndex(el => !el.strikeout)
const aiEdit = !~curElementList.findIndex(el => !el.aiEdit)
const color = curElement.color || null
const highlight = curElement.highlight || null
const rowFlex = curElement.rowFlex || null
@ -461,6 +462,7 @@ export class RangeManager {
italic,
underline,
strikeout,
aiEdit,
color,
highlight,
rowFlex,
@ -503,6 +505,7 @@ export class RangeManager {
italic: false,
underline: false,
strikeout: false,
aiEdit: false,
color: null,
highlight: null,
rowFlex: null,

1
packages/word/src/editor/interface/Element.ts

@ -33,6 +33,7 @@ export interface IElementStyle {
italic?: boolean
underline?: boolean
strikeout?: boolean
aiEdit?: boolean
rowFlex?: RowFlex
rowMargin?: number
letterSpacing?: number

1
packages/word/src/editor/interface/Listener.ts

@ -23,6 +23,7 @@ export interface IRangeStyle {
italic: boolean
underline: boolean
strikeout: boolean
aiEdit: boolean
color: string | null
highlight: string | null
rowFlex: RowFlex | null

3
packages/word/src/plugins/floatingToolbar/enum/index.ts

@ -6,5 +6,6 @@ export enum ToolbarType {
UNDERLINE = 'underline',
STRIKEOUT = 'strikeout',
COLOR = 'color',
HIGHLIGHT = 'highlight'
HIGHLIGHT = 'highlight',
AI_EDIT = 'ai-edit'
}

15
packages/word/src/plugins/floatingToolbar/icons/Svgs.ts

@ -0,0 +1,15 @@
export const Svgs = {
tips: `<svg t="1731999782807" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7508" width="16" height="16"><path d="M512 988.16c-78.848 0-143.36-64.512-143.36-143.36 0-17.408 13.312-30.72 30.72-30.72s30.72 13.312 30.72 30.72c0 45.056 36.864 81.92 81.92 81.92s81.92-36.864 81.92-81.92c0-17.408 13.312-30.72 30.72-30.72s30.72 13.312 30.72 30.72c0 78.848-64.512 143.36-143.36 143.36zM890.88 793.6H133.12c-45.056 0-81.92-36.864-81.92-81.92s36.864-81.92 81.92-81.92h62.464V403.456C195.584 229.376 337.92 87.04 512 87.04s316.416 142.336 316.416 316.416v226.304H890.88c45.056 0 81.92 36.864 81.92 81.92s-36.864 81.92-81.92 81.92z m-757.76-102.4c-11.264 0-20.48 9.216-20.48 20.48s9.216 20.48 20.48 20.48h757.76c11.264 0 20.48-9.216 20.48-20.48s-9.216-20.48-20.48-20.48h-93.184c-17.408 0-30.72-13.312-30.72-30.72V403.456c0-140.288-114.688-254.976-254.976-254.976S257.024 263.168 257.024 403.456v257.024c0 17.408-13.312 30.72-30.72 30.72H133.12z" p-id="7509" fill="#515151"></path><path d="M552.96 138.24h-81.92c-17.408 0-30.72-13.312-30.72-30.72 0-39.936 31.744-71.68 71.68-71.68s71.68 31.744 71.68 71.68c0 17.408-13.312 30.72-30.72 30.72z" p-id="7510" fill="#515151"></path></svg>`,
check: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z"></path></svg>`,
refresh: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z" fill="currentColor"></path></svg>`,
aiPanelStart: `<svg t="1732001314260" class="icon" viewBox="0 0 1213 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40479" width="16" height="16"><path d="M1004.046124 568.908272l-379.622349 358.119266a54.421386 54.421386 0 0 0 0.26547 80.399538c23.778543 22.185722 62.195869 22.071949 85.822715-0.227546l470.3373-443.67651A56.886466 56.886466 0 0 0 1213.57794 510.580683a54.876477 54.876477 0 0 0-17.634804-41.489196L716.466076 16.844083A63.561145 63.561145 0 0 0 630.681286 16.578612a54.421386 54.421386 0 0 0-0.26547 80.437463L1010.038165 455.135341H56.886466a56.886466 56.886466 0 0 0 0 113.772931h947.159658z" fill="#ffffff" p-id="40480"></path></svg>`,
addContent: `<svg t="1732001601983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="41747" width="16" height="16"><path d="M1022.721598 853.802081v-298.123346a43.550895 43.550895 0 0 0-87.059176 0v299.146067a85.2268 85.2268 0 0 1-85.2268 85.2268H168.32293a85.2268 85.2268 0 0 1-85.2268-85.2268V172.030295a85.2268 85.2268 0 0 1 85.2268-85.226799h298.933a43.380441 43.380441 0 0 0 0-86.760883H170.4536a170.4536 170.4536 0 0 0-170.4536 170.4536v683.305868a170.4536 170.4536 0 0 0 170.4536 170.453599h681.814398a170.4536 170.4536 0 0 0 170.4536-170.453599zM724.598252 296.54665v173.436538a42.442946 42.442946 0 1 0 84.885893 0v-173.436538h171.604161a41.633292 41.633292 0 1 0 0-83.266583h-171.604161V42.48556a42.442946 42.442946 0 1 0-84.885893 0v170.794507h-173.053017a41.633292 41.633292 0 1 0 0 83.266583h173.053017z" fill="#515151" p-id="41748"></path></svg>`,
replace: `<svg t="1731999904401" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10318" width="16" height="16"><path d="M668.506 478.509l-42.425 42.425L697.146 592H449.573v60H842l-60-60zM449.573 688.509l60 60L623.067 862l42.425-42.426-71.065-71.065H842v-60H534.427z" fill="#515151" p-id="10319"></path><path d="M182 162v700h200v-60H242V222h540v250h60V162z" fill="#515151" p-id="10320"></path><path d="M322 302h380v60H322zM322 422h260v60H322z" fill="#515151" p-id="10321"></path></svg> `,
cancle: `<svg t="1731999948759" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12341" width="16" height="16"><path d="M768 153.6h230.4a25.6 25.6 0 1 1 0 51.2H921.6v716.8a102.4 102.4 0 0 1-102.4 102.4H204.8a102.4 102.4 0 0 1-102.4-102.4V204.8H25.6a25.6 25.6 0 0 1 0-51.2H256V102.4a102.4 102.4 0 0 1 102.4-102.4h307.2a102.4 102.4 0 0 1 102.4 102.4v51.2z m-51.2 0V102.4a51.2 51.2 0 0 0-51.2-51.2H358.4a51.2 51.2 0 0 0-51.2 51.2v51.2h409.6zM153.6 204.8v716.8a51.2 51.2 0 0 0 51.2 51.2h614.4a51.2 51.2 0 0 0 51.2-51.2V204.8H153.6z" fill="#515151" p-id="12342"></path></svg>`,
optimize: `<svg t="1732000413328" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18919" width="16" height="16"><path d="M819.2 486.4L682.666667 328.533333c0-4.266667 0-8.533333-4.266667-12.8l-34.133333-226.133333c0-12.8-17.066667-21.333333-29.866667-17.066667L396.8 149.333333h-8.533333l-230.4-8.533333c-12.8 0-25.6 8.533333-21.333334 25.6l25.6 226.133333v8.533334L72.533333 597.333333c-4.266667 12.8 4.266667 25.6 17.066667 29.866667l200.533333 25.6c4.266667 0 8.533333 4.266667 12.8 8.533333l153.6 174.933334c8.533333 12.8 25.6 8.533333 34.133334-4.266667l123.733333-204.8c0-4.266667 4.266667-4.266667 8.533333-8.533333l187.733334-102.4c17.066667-4.266667 17.066667-21.333333 8.533333-29.866667z m-234.666667 59.733333c-17.066667 8.533333-29.866667 21.333333-38.4 38.4l-81.066666 128-93.866667-110.933333c-17.066667-21.333333-42.666667-34.133333-68.266667-34.133333L183.466667 554.666667l51.2-123.733334c8.533333-17.066667 8.533333-34.133333 8.533333-51.2l-17.066667-149.333333 157.866667 8.533333c12.8 0 29.866667 0 42.666667-4.266666l145.066666-51.2 25.6 145.066666c0 21.333333 8.533333 38.4 21.333334 55.466667l85.333333 98.133333-119.466667 64z" fill="#515151" p-id="18920"></path><path d="M633.6 690.944l60.373333-60.330667 193.066667 193.109334-60.330667 60.330666z" fill="#515151" p-id="18921"></path></svg>`,
checkGrammar: `<svg t="1732000545177" class="icon" viewBox="0 0 1116 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25780" width="16" height="16"><path d="M952.463696 443.229454a172.080162 172.080162 0 0 0 108.410501-34.416032 145.407737 145.407737 0 0 0 54.205251-92.923288h-51.624048a98.946093 98.946093 0 0 1-39.578437 57.646854 122.176915 122.176915 0 0 1-72.273668 21.510021 108.410502 108.410502 0 0 1-92.062887-46.461644 209.077397 209.077397 0 0 1-34.416032-126.478919 209.937797 209.937797 0 0 1 34.416032-126.478919 108.410502 108.410502 0 0 1 92.062887-46.461644 112.712506 112.712506 0 0 1 72.273668 24.091223 114.433308 114.433308 0 0 1 40.438838 64.530061h51.624048a154.011745 154.011745 0 0 0-54.205251-99.806494A164.336555 164.336555 0 0 0 952.463696 0.123037a158.313749 158.313749 0 0 0-129.920523 59.367656A252.097437 252.097437 0 0 0 774.360728 221.246045a250.376635 250.376635 0 0 0 48.182445 161.755352 158.313749 158.313749 0 0 0 129.920523 60.228057z m-473.220445-56.786453h98.946093a107.550101 107.550101 0 0 0 65.390461-18.928818 67.111263 67.111263 0 0 0 23.230822-55.926053 65.390461 65.390461 0 0 0-23.230822-57.646854 119.595712 119.595712 0 0 0-73.134069-18.928818H479.243251z m0-329.53351v135.943328h78.296473a116.154109 116.154109 0 0 0 68.832065-17.208017 59.367656 59.367656 0 0 0 23.230822-50.763647 62.809259 62.809259 0 0 0-20.64962-49.903247 86.040081 86.040081 0 0 0-58.507255-18.068417z m106.6897 375.995153H428.479603V10.447847h154.872145a126.478919 126.478919 0 0 1 86.040081 28.393227 98.085692 98.085692 0 0 1 31.83483 77.436073 94.644089 94.644089 0 0 1-20.649619 59.367655 80.017275 80.017275 0 0 1-49.042846 31.83483v4.302004a98.946093 98.946093 0 0 1 86.040081 103.248097 109.270903 109.270903 0 0 1-36.136834 86.040081 147.988939 147.988939 0 0 1-95.50449 31.83483zM171.219761 81.861114l-6.022806 18.928818-15.487214 47.322044-22.370421 53.344851-15.487215 47.322044-6.022805 18.928818h133.362125L175.521765 81.861114z m123.037316 351.04353l-6.022806-18.068417-14.626814-42.159639-13.766413-42.15964-6.022805-18.068417H92.923287l-40.438838 120.456113H0L148.84934 10.447847h49.903247l147.988939 422.456797z" fill="#515151" p-id="25781"></path><path d="M290.815473 631.657231l-98.946093 83.458879 263.282648 308.88389 486.126457-437.944012-86.040081-95.50449-388.040765 348.462328-176.382166-207.356595z" fill="#515151" p-id="25782"></path></svg>`,
simplification: `<svg t="1732000724337" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34332" width="16" height="16"><path d="M843.2 64 175.552 64c-101.248 0-110.08 116.864-110.08 116.864s0 606.848 0 675.776c0 68.928 110.08 103.36 110.08 103.36l495.296 0 287.616-283.2c0 0 0-417.984 0-504.896C958.528 84.992 843.2 64 843.2 64zM888.768 648.64c0 35.328-37.312 37.184-37.312 37.184s-85.376 0-126.976 0c-41.536 0-41.152 31.488-41.152 31.488s0 81.28 0 125.888c0 44.48-22.528 46.4-22.528 46.4s-418.048 0-468.992 0-56.448-43.456-56.448-43.456 0-591.808 0-648.768 56.448-67.392 56.448-67.392 579.904 2.88 633.216 2.88c53.248 0 63.744 63.744 63.744 63.744S888.768 613.184 888.768 648.64z" fill="#515151" p-id="34333"></path><path d="M754.752 373.696c0 19.264-15.488 34.752-34.688 34.752L300.288 408.448c-19.2 0-34.752-15.488-34.752-34.752l0 0c0-19.2 15.552-34.688 34.752-34.688l419.776 0C739.264 339.008 754.752 354.496 754.752 373.696L754.752 373.696z" fill="#515151" p-id="34334"></path><path d="M680.64 550.336c0 18.56-15.104 33.664-33.728 33.664L299.264 584c-18.56 0-33.664-15.104-33.664-33.664l0 0c0-18.752 15.104-33.792 33.664-33.792l347.648 0C665.472 516.48 680.64 531.584 680.64 550.336L680.64 550.336z" fill="#515151" p-id="34335"></path></svg>`,
richContent: `<svg t="1732000631383" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28766" width="16" height="16"><path d="M451.733333 665.066667l-2.133333 118.933333c0 9.066667 6.933333 16 16 16h0.533333l117.866667-2.666667c2.133333 0 4.266667-1.066667 5.333333-2.133333l356.266667-356.266667c3.2-3.2 3.2-8 0-11.2L821.333333 303.466667c-1.6-1.6-3.733333-2.133333-5.866666-2.133334-2.133333 0-4.266667 1.066667-5.866667 2.133334L453.333333 659.733333c-0.533333 1.066667-1.6 3.2-1.6 5.333334z m63.466667 23.466666L816 387.733333l45.333333 45.333334-301.333333 300.8-45.866667 1.066666c0.533333 0 1.066667-46.4 1.066667-46.4zM661.333333 341.333333H320c-5.866667 0-10.666667-4.8-10.666667-10.666666V266.666667c0-5.866667 4.8-10.666667 10.666667-10.666667h341.333333c5.866667 0 10.666667 4.8 10.666667 10.666667v64c0 5.866667-4.8 10.666667-10.666667 10.666666zM490.133333 512H320c-5.866667 0-10.666667-4.8-10.666667-10.666667V437.333333c0-5.866667 4.8-10.666667 10.666667-10.666666h170.133333c5.866667 0 10.666667 4.8 10.666667 10.666666v64c0 5.866667-4.8 10.666667-10.666667 10.666667z" p-id="28767" fill="#515151"></path><path d="M757.333333 865.066667H224V160h533.333333v74.666667c0 5.866667 4.8 10.666667 10.666667 10.666666h64c5.866667 0 10.666667-4.8 10.666667-10.666666V106.666667c0-17.6-14.4-32-32-32H170.666667c-17.6 0-32 14.4-32 32v811.733333c0 17.6 14.4 32 32 32h640c17.6 0 32-14.4 32-32V736c0-5.866667-4.8-10.666667-10.666667-10.666667h-64c-5.866667 0-10.666667 4.8-10.666667 10.666667v129.066667z" p-id="28768" fill="#515151"></path></svg>`,
translation: `<svg t="1732000795334" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38216" width="16" height="16"><path d="M608 416h288.00000001c35.36 0 63.99999999 28.48000002 63.99999999 64v416.00000001c0 35.36-28.48000002 63.99999999-63.99999999 63.99999999H480c-35.36 0-63.99999999-28.48000002-64-64.00000001v-287.99999999H127.99999999c-35.36 0-63.99999999-28.48000002-63.99999999-64V127.99999999c0-35.36 28.48000002-63.99999999 64.00000001-63.99999999h415.99999999c35.36 0 63.99999999 28.48000002 64 64.00000001v287.99999999z m0 64v64c0 35.36-28.48000002 63.99999999-64 64h-64v256.032c0 17.664 14.304 31.96800001 31.968 31.96799999H864a31.96800001 31.96800001 0 0 0 31.968-31.96799999V512a31.96800001 31.96800001 0 0 0-31.968-31.96800001H608zM127.99999999 159.968V512c0 17.664 14.304 31.96800001 31.96800001 31.96800001H512a31.96800001 31.96800001 0 0 0 31.96800001-31.96800001V160A31.96800001 31.96800001 0 0 0 512.032 127.99999999H160A31.96800001 31.96800001 0 0 0 127.99999999 159.968z m64.00000001 244.288V243.36h112.736V176h46.752c6.4 0.928 9.63200001 1.824 9.632 2.75200001a10.56000001 10.56000001 0 0 1-1.37600001 4.12799998c-2.75200001 7.328-4.128 16.032-4.12799999 26.11200001v34.368h119.648v156.768h-50.88000001v-20.64000001h-68.76799999v118.27200002H306.11199999v-118.27200002H238.752v24.76800001H192z m46.72-122.36800001v60.48000001h67.39200001V281.91999999H238.752z m185.66400001 60.48000001V281.91999999h-68.76800001v60.48000001h68.76799999z m203.83999999 488H575.99999999L668.128 575.99999999h64.64l89.344 254.40000002h-54.976l-19.264-53.66400001h-100.38399999l-19.23200001 53.632z m33.024-96.256h72.864l-34.368-108.608h-1.376l-37.12 108.608zM896.00000001 320h-64.00000001a128.00000001 128.00000001 0 0 0-128-128V127.99999999a192 192 0 0 1 191.99999999 192.00000001zM127.99999999 704h64.00000001a128.00000001 128.00000001 0 0 0 128 128v64.00000001a192 192 0 0 1-191.99999999-192.00000001z" fill="#515151" p-id="38217"></path></svg>`,
summary: `<svg t="1732001057788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39349" width="16" height="16"><path d="M794.168 517.746L746 469.574 499.4 792.73l-15.662 11.746-359.024 138.4-46.44-46.56 139.34-358.2 11.688-15.546 322.932-246.76-47.98-47.978L671.132 60.954l289.914 289.914z m-513.2 55.832l-74.2 190.738 195.326-195.328a52 52 0 1 1 50.912 50.912l-194.24 194.24L448.4 741.038l246.186-322.6-91.064-91.338z m325.11-345.746l188.09 188.09 65.054-65.054-188.09-188.09z" p-id="39350" fill="#515151"></path></svg>`
}

1
packages/word/src/plugins/floatingToolbar/icons/ai-edit.svg

@ -0,0 +1 @@
<svg t="1731985324837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2001" width="16" height="16"><path d="M683.7 922.7h-345c-73.5 0-133.3-59.8-133.3-133.3V459.8c0-73.5 59.8-133.3 133.3-133.3h345c73.5 0 133.3 59.8 133.3 133.3v329.6c0 73.5-59.8 133.3-133.3 133.3z m-345-506.9c-24.3 0-44.1 19.8-44.1 44.1v329.6c0 24.3 19.8 44.1 44.1 44.1h345c24.3 0 44.1-19.8 44.1-44.1V459.8c0-24.3-19.8-44.1-44.1-44.1h-345zM914.3 759.6c-24.6 0-44.6-20-44.6-44.6V534.3c0-24.6 20-44.6 44.6-44.6s44.6 20 44.6 44.6V715c0 24.7-20 44.6-44.6 44.6zM111.7 759.6c-24.6 0-44.6-20-44.6-44.6V534.3c0-24.6 20-44.6 44.6-44.6s44.6 20 44.6 44.6V715c0 24.7-19.9 44.6-44.6 44.6z" fill="#515151" p-id="2002"></path><path d="M511.2 415.8c-24.6 0-44.6-20-44.6-44.6V239.3c0-24.6 20-44.6 44.6-44.6s44.6 20 44.6 44.6v131.9c0 24.6-20 44.6-44.6 44.6z" fill="#515151" p-id="2003"></path><path d="M511.2 276.6c-49.2 0-89.2-40-89.2-89.2s40-89.2 89.2-89.2 89.2 40 89.2 89.2-40 89.2-89.2 89.2z m0-89.2h0.2-0.2z m0 0h0.2-0.2z m0 0h0.2-0.2z m0 0h0.2-0.2z m0 0z m0 0h0.2-0.2z m0 0h0.2-0.2z m0-0.1h0.2-0.2zM399 675.5c-28.1 0-50.9-22.8-50.9-50.9 0-28.1 22.8-50.9 50.9-50.9s50.9 22.8 50.9 50.9c0 28.1-22.8 50.9-50.9 50.9zM622.9 675.5c-28.1 0-50.9-22.8-50.9-50.9 0-28.1 22.8-50.9 50.9-50.9 28.1 0 50.9 22.8 50.9 50.9 0 28.1-22.8 50.9-50.9 50.9z" fill="#515151" p-id="2004"></path></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

108
packages/word/src/plugins/floatingToolbar/index.ts

@ -5,6 +5,7 @@ import './style/index.scss'
import { ToolbarType } from './enum'
import { IToolbarRegister } from './interface'
import { PLUGIN_PREFIX } from './constant'
import { Svgs } from './icons/Svgs'
function createPickerToolbar(
container: HTMLDivElement,
@ -60,9 +61,110 @@ function createPickerToolbar(
changed(color)
})
}
export const defaultAiPanelMenus = [
{
prompt: `<content>{content}</content>\n请帮我优化一下这段内容,并直接返回优化后的结果。\n注意:你应该先判断一下这句话是中文还是英文,如果是中文,请给我返回中文的内容,如果是英文,请给我返回英文内容,只需要返回内容即可,不需要告知我是中文还是英文。`,
icon: Svgs.optimize,
title: '改进写作'
},
{
prompt: `<content>{content}</content>\n请帮我检查一下这段内容,是否有拼写错误或者语法上的错误。\n注意:你应该先判断一下这句话是中文还是英文,如果是中文,请给我返回中文的内容,如果是英文,请给我返回英文内容,只需要返回内容即可,不需要告知我是中文还是英文。`,
icon: Svgs.checkGrammar,
title: '检查拼写和语法'
},
{
prompt: `<content>{content}</content>\n这句话的内容较长,帮我简化一下这个内容,并直接返回简化后的内容结果。\n注意:你应该先判断一下这句话是中文还是英文,如果是中文,请给我返回中文的内容,如果是英文,请给我返回英文内容,只需要返回内容即可,不需要告知我是中文还是英文。`,
icon: Svgs.simplification,
title: '简化内容'
},
{
prompt: `<content>{content}</content>\n这句话的内容较简短,帮我简单的优化和丰富一下内容,并直接返回优化后的结果。注意:优化的内容不能超过原来内容的 2 倍。\n注意:你应该先判断一下这句话是中文还是英文,如果是中文,请给我返回中文的内容,如果是英文,请给我返回英文内容,只需要返回内容即可,不需要告知我是中文还是英文。`,
icon: Svgs.richContent,
title: '丰富内容'
},
'<hr/>',
{
prompt: `<content>{content}</content>\n请帮我翻译以上内容,在翻译之前,想先判断一下这个内容是不是中文,如果是中文,则翻译问英文,如果是其他语言,则需要翻译为中文,注意,你只需要返回翻译的结果,不需要对此进行任何解释,不需要除了翻译结果以外的其他任何内容。`,
icon: Svgs.translation,
title: '翻译'
},
{
prompt: `<content>{content}</content>\n请帮我总结以上内容,并直接返回总结的结果\n注意:你应该先判断一下这句话是中文还是英文,如果是中文,请给我返回中文的内容,如果是英文,请给我返回英文内容,只需要返回内容即可,不需要告知我是中文还是英文。`,
icon: Svgs.summary,
title: '总结'
}
]
// 创建ai选择栏
function createAIToolbar(
container: HTMLDivElement,
toolbarType: ToolbarType,
changed: (color: string) => void
) {
const toolbarItem = document.createElement('div')
toolbarItem.classList.add(`${PLUGIN_PREFIX}-picker-ai`)
toolbarItem.classList.add(`${PLUGIN_PREFIX}-${toolbarType}`)
const chooseBox = document.createElement('div')
chooseBox.classList.add('ce-picker-container')
toolbarItem.append(chooseBox)
const aiBubbleMenuItems = defaultAiPanelMenus
toolbarItem.innerHTML = `
<i></i>
<div class="aie-container">
<div class="aie-ai-panel-body">
<div class="aie-ai-panel-body-content" style="display: none"><div class="loader">
${Svgs.refresh}
</div><textarea readonly></textarea></div>
<div class="aie-ai-panel-body-input"><input id="prompt" placeholder="告诉 AI 下一步应该如何?比如:帮我翻译成英语" type="text" />
<button type="button" id="go" style="width: 30px;height: 30px">
${Svgs.aiPanelStart}
</button></div>
<div class="aie-ai-panel-body-tips">
${Svgs.tips}
</div>
</div>
<div class="aie-ai-panel-footer" style="display: none">
<div class="aie-ai-panel-footer-tips">
:
</div>
<p id="insert">${Svgs.addContent}</p>
<p id="replace">${Svgs.replace}</p>
<hr/>
<p id="hide">${Svgs.cancle}</p>
</div>
<!--aie-ai-panel-actions-->
<div class="aie-ai-panel-footer aie-ai-panel-actions" >
<div class="aie-ai-panel-footer-tips">:</div>
${aiBubbleMenuItems
.map(menuItem => {
return typeof menuItem === 'string'
? menuItem
: `<p data-prompt="${menuItem.prompt}">${menuItem.icon} ${menuItem.title} </p>`
})
.join('')}
</div>
</div>
`
container.append(toolbarItem)
}
// 工具栏列表
const toolbarRegisterList: IToolbarRegister[] = [
{
// key: ToolbarType.AI_EDIT,
// callback(editor) {
// console.log('editor:', editor)
// }
render(container, editor) {
createAIToolbar(container, ToolbarType.AI_EDIT, color => {
editor.command.executeColor(color)
})
}
},
{
isDivider: true
},
{
key: ToolbarType.SIZE_ADD,
callback(editor) {
@ -178,6 +280,12 @@ export default function floatingToolbarPlugin(editor: Editor) {
toolbarContainer.style.left = `${position.x}px`
toolbarContainer.style.top = `${position.y + position.height}px`
// 样式回显
const aiDom = toolbarContainer.querySelector<HTMLDivElement>(
`.${PLUGIN_PREFIX}-ai-edit`
)
if (aiDom) {
toggleToolbarItemActive(aiDom, rangeStyle.aiEdit)
}
const boldDom = toolbarContainer.querySelector<HTMLDivElement>(
`.${PLUGIN_PREFIX}-bold`
)

200
packages/word/src/plugins/floatingToolbar/style/index.scss

@ -44,6 +44,10 @@
background-color: #cfd2d8;
}
&.ce-ai-edit i {
background: url(../icons/ai-edit.svg);
}
&.ce-size-add i {
background: url(../icons/size-add.svg);
}
@ -97,4 +101,200 @@
background: url(../icons/highlight.svg);
}
}
}
.aie-container {
position: absolute;
top: 40px;
left: 0;
height: 100%;
*, ::before, ::after {
box-sizing: content-box;
}
.aie-ai-panel-body {
width: 350px;
border: solid 1px;
background: #ffffff;
border-radius: 5px;
border-color: #eee;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .15);
display: flex;
flex-direction: column;
overflow: hidden;
&-tips {
width: 100%;
padding: 10px;
color: #999;
font-size: 12px;
background-color: #fafafa;
box-sizing: border-box;
display: flex;
align-items: center;
svg {
width: 15px;
height: 15px;
margin-right: 5px;
}
}
&-content {
width: 100%;
// height: 160px;
position: relative;
.loader {
position: absolute;
top: 10px;
right: 10px;
display: none;
svg {
width: 16px;
color: #999;
animation: rotate 2s linear infinite;
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
}
textarea {
width: 100%;
height: 100%;
max-height: 300px;
padding: 15px;
box-sizing: border-box;
font-size: 12px;
line-height: 1.6em;
font-family: Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
border: none;
resize: none;
}
textarea:focus-visible {
outline: none;
}
}
&-input {
display: flex;
justify-content: space-between;
box-sizing: border-box;
border-bottom: 1px solid;
border-bottom-color: #eee;
align-items: center;
padding: 5px 10px 5px 5px;
input {
width: 92%;
height: 90%;
border: none;
margin: 0;
background: #ffffff;
font-size: 12px;
font-family: Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
background-color: #edf0f5;
padding: 10px;
box-sizing: border-box;
border-radius: 4px;
&::-webkit-input-placeholder {
color: #ccc;
font-size: 12px;
}
}
input:focus-visible {
outline: none;
}
button {
border: none;
border-radius: 50%;
width: 25px !important;
height: 25px !important;
padding: 0;
margin-left: 5px;
background: #609eec;
svg {
fill: #fff;
width: 14px;
margin-top: 2px;
}
}
button:hover {
background: #ccc;
cursor: pointer;
}
}
}
.aie-ai-panel-footer {
width: fit-content;
border: solid 1px;
border-color: #eee;
background: #ffffff;
border-radius: 5px;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .15);
display: flex;
padding: 10px 0;
flex-direction: column;
margin-top: 5px;
&-tips {
padding: 5px 10px;
color: #999;
font-size: 12px;
margin-bottom: 5px;
}
hr {
height: 1px;
width: 100%;
margin: 5px 0;
background-color: #eaeaea;
border: none;
}
p {
width: 100%;
margin: 0;
}
p {
cursor: pointer;
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
height: 25px;
line-height: 25px;
font-weight: 600;
font-size: 12px;
padding: 0 20px;
color: #666;
text-decoration: none;
font-family: Arial, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
p:hover {
background: #e3e2e2;
}
svg {
width: 16px;
height: 16px;
margin-right: 10px;
}
}
}
Loading…
Cancel
Save