1 line
6.6 KiB
Plaintext
1 line
6.6 KiB
Plaintext
{"version":3,"file":"edit.79e728fb.js","sources":["../../../paragraph/lib/edit.tsx"],"sourcesContent":["import {\n defineComponent,\n reactive,\n computed,\n ref,\n Ref,\n onMounted,\n watch,\n PropType,\n} from 'vue';\nimport {\n model,\n useActivation,\n SbToolbar,\n SbSelect,\n} from '@schlechtenburg/core';\nimport {\n getDefaultData,\n IParagraphData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n name: 'sb-paragraph-edit',\n\n model,\n\n props: {\n blockId: { type: String, required: true },\n data: {\n type: (null as unknown) as PropType<IParagraphData>,\n default: getDefaultData,\n },\n onUpdate: {\n type: (null as unknown) as PropType<((block?: Partial<IParagraphData>) => void)>,\n default: () => {},\n },\n onAppendBlock: {\n type: (null as unknown) as PropType<((block?: any) => void)>,\n default: () => {},\n },\n onRemoveSelf: {\n type: (null as unknown) as PropType<() => void>,\n default: () => {},\n },\n onActivateNext: {\n type: (null as unknown) as PropType<() => void>,\n default: () => {},\n },\n onActivatePrevious: {\n type: (null as unknown) as PropType<() => void>,\n default: () => {},\n },\n },\n\n setup(props) {\n const localData = (reactive({\n value: props.data.value,\n align: props.data.align,\n focused: false,\n }) as unknown) as {\n value: string;\n align: string;\n focused: boolean;\n };\n\n const inputEl: Ref<null|HTMLElement> = ref(null);\n\n const { isActive, activate } = useActivation(props.blockId);\n\n const focusInput = () => {\n if (inputEl.value && isActive.value) {\n inputEl.value.focus();\n }\n };\n\n onMounted(() => {\n focusInput();\n if (inputEl.value) {\n inputEl.value.innerHTML = localData.value;\n }\n });\n\n watch(isActive, focusInput);\n\n watch(() => props.data, () => {\n localData.value = props.data.value;\n localData.align = props.data.align;\n if (inputEl.value) {\n inputEl.value.innerHTML = localData.value;\n }\n });\n\n const onTextUpdate = ($event: Event) => {\n localData.value = ($event.target as HTMLElement).innerHTML;\n };\n\n const classes = computed(() => ({\n 'sb-paragraph': true,\n 'sb-paragraph_focused': localData.focused,\n [`sb-paragraph_align-${localData.align}`]: true,\n }));\n\n const setAlignment = ($event: Event) => {\n props.onUpdate({\n value: localData.value,\n align: ($event.target as HTMLSelectElement).value,\n });\n };\n\n const onFocus = () => {\n localData.focused = true;\n activate();\n };\n\n const onBlur = () => {\n localData.focused = false;\n props.onUpdate({\n value: localData.value,\n align: localData.align,\n });\n };\n\n const onKeydown = ($event: KeyboardEvent) => {\n if ($event.key === 'Enter' && !$event.shiftKey) {\n const id = `${+(new Date())}`;\n props.onAppendBlock({\n id,\n name: 'sb-paragraph',\n data: getDefaultData(),\n });\n\n activate(id);\n\n $event.preventDefault();\n }\n };\n\n const onKeyup = ($event: KeyboardEvent) => {\n if ($event.key === 'Backspace' && localData.value === '') {\n props.onRemoveSelf();\n }\n\n const selection = window.getSelection();\n const node = selection?.focusNode;\n const childNodes = Array.from(inputEl?.value?.childNodes || []);\n const index = node ? childNodes.indexOf(node as ChildNode) : -1;\n if (node === inputEl.value || index === 0 || index === childNodes.length -1) {\n switch ($event.key) {\n case 'ArrowDown':\n props.onActivateNext();\n break;\n case 'ArrowUp':\n props.onActivatePrevious();\n break;\n }\n }\n };\n\n return () => (\n <div class={classes.value}>\n <SbToolbar>\n <SbSelect\n {...{\n value: localData.align,\n onChange: setAlignment,\n }}\n >\n <option>left</option>\n <option>center</option>\n <option>right</option>\n </SbSelect>\n </SbToolbar>\n <p\n class=\"sb-paragraph__input\"\n ref={inputEl}\n contenteditable\n onInput={onTextUpdate}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeydown={onKeydown}\n onKeyup={onKeyup}\n ></p>\n </div>\n );\n },\n});\n"],"names":["defineComponent","name","model","props","blockId","type","String","required","data","default","getDefaultData","onUpdate","onAppendBlock","onRemoveSelf","onActivateNext","onActivatePrevious","setup","localData","reactive","value","align","focused","inputEl","ref","isActive","activate","useActivation","focusInput","focus","innerHTML","onTextUpdate","$event","target","classes","computed","setAlignment","onFocus","onBlur","onKeydown","key","shiftKey","id","Date","preventDefault","onKeyup","selection","window","getSelection","node","focusNode","childNodes","Array","from","index","indexOf","length","onChange"],"mappings":"8IAuBA,MAAeA,EAAgB,CAC7BC,KAAM,oBAENC,MAAAA,EAEAC,MAAO,CACLC,QAAS,CAAEC,KAAMC,OAAQC,UAAU,GACnCC,KAAM,CACJH,KAAO,KACPI,QAASC,GAEXC,SAAU,CACRN,KAAO,KACPI,QAAS,QAEXG,cAAe,CACbP,KAAO,KACPI,QAAS,QAEXI,aAAc,CACZR,KAAO,KACPI,QAAS,QAEXK,eAAgB,CACdT,KAAO,KACPI,QAAS,QAEXM,mBAAoB,CAClBV,KAAO,KACPI,QAAS,SAIbO,MAAMb,SACEc,EAAaC,EAAS,CAC1BC,MAAOhB,EAAMK,KAAKW,MAClBC,MAAOjB,EAAMK,KAAKY,MAClBC,SAAS,IAOLC,EAAiCC,EAAI,OAErCC,SAAEA,WAAUC,GAAaC,EAAcvB,EAAMC,SAE7CuB,EAAa,KACbL,EAAQH,OAASK,EAASL,SACpBA,MAAMS,YAIR,SAEJN,EAAQH,UACFA,MAAMU,UAAYZ,EAAUE,YAIlCK,EAAUG,MAEV,IAAMxB,EAAMK,OAAM,OACZW,MAAQhB,EAAMK,KAAKW,QACnBC,MAAQjB,EAAMK,KAAKY,MACzBE,EAAQH,UACFA,MAAMU,UAAYZ,EAAUE,gBAIlCW,QACMX,MAASY,EAAOC,OAAuBH,WAG7CI,EAAUC,GAAS,KAAO,iBACd,yBACQjB,EAAUI,SAChC,sBAAqBJ,EAAUG,UAAU,MAGvCe,QACExB,SAAS,CACbQ,MAAOF,EAAUE,MACjBC,MAAQW,EAAOC,OAA6Bb,SAI1CiB,EAAU,OACJf,SAAU,OAIhBgB,EAAS,OACHhB,SAAU,IACdV,SAAS,CACbQ,MAAOF,EAAUE,MACjBC,MAAOH,EAAUG,SAIfkB,SACe,UAAfP,EAAOQ,MAAoBR,EAAOS,SAAU,OACxCC,EAAM,KAAI,IAAIC,OACd9B,cAAc,CAClB6B,GAAAA,EACAxC,KAAM,eACNO,KAAME,QAGC+B,KAEFE,mBAILC,YACe,cAAfb,EAAOQ,KAA2C,KAApBtB,EAAUE,SACpCN,qBAGFgC,EAAYC,OAAOC,eACnBC,QAAOH,WAAWI,UAClBC,EAAaC,MAAMC,MAAK9B,0BAASH,gBAAO+B,aAAc,IACtDG,EAAQL,EAAOE,EAAWI,QAAQN,SACpCA,IAAS1B,EAAQH,OAAmB,IAAVkC,GAAeA,IAAUH,EAAWK,OAAQ,SAChExB,EAAOQ,SACR,cACGzB,2BAEH,YACGC,6BAMP,mBACOkB,EAAQd,oCAIZA,MAAOF,EAAUG,MACjBoC,SAAUrB,8HASR,0BACDb,6BAEIQ"} |