1 line
7.8 KiB
Plaintext
1 line
7.8 KiB
Plaintext
{"version":3,"file":"edit.8834832a.js","sources":["../../../heading/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 OnUpdateSelfCb,\n OnAppendBlockCb,\n OnRemoveSelfCb,\n OnActivateNextCb,\n OnActivatePreviousCb,\n} from '@schlechtenburg/core';\nimport {\n getDefaultData,\n IHeadingData\n} from './util';\nimport { getDefaultData as getDefaultParagraphData } from '@schlechtenburg/paragraph';\n\nimport './style.scss';\n\nexport default defineComponent({\n name: 'sb-heading-edit',\n\n model,\n\n props: {\n blockId: { type: String, required: true },\n data: {\n type: (null as unknown) as PropType<IHeadingData>,\n default: getDefaultData,\n },\n onUpdate: {\n type: (null as unknown) as PropType<OnUpdateSelfCb<IHeadingData>>,\n default: () => {},\n },\n onAppendBlock: {\n type: (null as unknown) as PropType<OnAppendBlockCb>,\n default: () => {},\n },\n onRemoveSelf: {\n type: (null as unknown) as PropType<OnRemoveSelfCb>,\n default: () => {},\n },\n onActivateNext: {\n type: (null as unknown) as PropType<OnActivateNextCb>,\n default: () => {},\n },\n onActivatePrevious: {\n type: (null as unknown) as PropType<OnActivatePreviousCb>,\n default: () => {},\n },\n },\n\n setup(props) {\n const localData = (reactive({\n value: props.data.value,\n align: props.data.align,\n level: props.data.level,\n focused: false,\n }) as unknown) as {\n value: string;\n align: string;\n level: number;\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 localData.level = props.data.level;\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-heading': true,\n 'sb-heading_focused': localData.focused,\n [`sb-heading_align-${localData.align}`]: true,\n [`sb-heading_${localData.level}`]: true,\n }));\n\n const setLevel = ($event: Event) => {\n props.onUpdate({\n ...localData,\n level: parseInt(($event.target as HTMLSelectElement).value, 10),\n });\n };\n\n const setAlignment = ($event: Event) => {\n props.onUpdate({\n ...localData,\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 level: localData.level,\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: getDefaultParagraphData(),\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.level,\n onChange: setLevel,\n }}\n >\n <option value={1}>h1</option>\n <option value={2}>h2</option>\n <option value={3}>h3</option>\n <option value={4}>h4</option>\n <option value={5}>h5</option>\n <option value={6}>h6</option>\n </SbSelect>\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-heading__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","level","focused","inputEl","ref","isActive","activate","useActivation","focusInput","focus","innerHTML","onTextUpdate","$event","target","classes","computed","setLevel","__assign","parseInt","setAlignment","onFocus","onBlur","onKeydown","key","shiftKey","id","Date","getDefaultParagraphData","preventDefault","onKeyup","selection","window","getSelection","node","focusNode","childNodes","Array","from","index","indexOf","length","onChange"],"mappings":"ueA6BA,MAAeA,EAAgB,CAC7BC,KAAM,kBAENC,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,MAAOlB,EAAMK,KAAKa,MAClBC,SAAS,IAQLC,EAAiCC,EAAI,OAErCC,SAAEA,WAAUC,GAAaC,EAAcxB,EAAMC,SAE7CwB,EAAa,KACbL,EAAQJ,OAASM,EAASN,SACpBA,MAAMU,YAIR,SAEJN,EAAQJ,UACFA,MAAMW,UAAYb,EAAUE,YAIlCM,EAAUG,MAEV,IAAMzB,EAAMK,OAAM,OACZW,MAAQhB,EAAMK,KAAKW,QACnBC,MAAQjB,EAAMK,KAAKY,QACnBC,MAAQlB,EAAMK,KAAKa,MACzBE,EAAQJ,UACFA,MAAMW,UAAYb,EAAUE,gBAIlCY,QACMZ,MAASa,EAAOC,OAAuBH,WAG7CI,EAAUC,GAAS,KAAO,eAChB,uBACQlB,EAAUK,SAC9B,oBAAmBL,EAAUG,UAAU,GACvC,cAAaH,EAAUI,UAAU,MAG/Be,QACEzB,SAAS0B,OACVpB,GADU,CAEbI,MAAOiB,SAAUN,EAAOC,OAA6Bd,MAAO,QAI1DoB,QACE5B,SAAS0B,OACVpB,GADU,CAEbG,MAAQY,EAAOC,OAA6Bd,UAI1CqB,EAAU,OACJlB,SAAU,OAIhBmB,EAAS,OACHnB,SAAU,IACdX,SAAS,CACbQ,MAAOF,EAAUE,MACjBC,MAAOH,EAAUG,MACjBC,MAAOJ,EAAUI,SAIfqB,SACe,UAAfV,EAAOW,MAAoBX,EAAOY,SAAU,OACxCC,EAAM,KAAI,IAAIC,OACdlC,cAAc,CAClBiC,GAAAA,EACA5C,KAAM,eACNO,KAAMuC,QAGCF,KAEFG,mBAILC,YACe,cAAfjB,EAAOW,KAA2C,KAApB1B,EAAUE,SACpCN,qBAGFqC,EAAYC,OAAOC,eACnBC,QAAOH,WAAWI,UAClBC,EAAaC,MAAMC,MAAKlC,0BAASJ,gBAAOoC,aAAc,IACtDG,EAAQL,EAAOE,EAAWI,QAAQN,SACpCA,IAAS9B,EAAQJ,OAAmB,IAAVuC,GAAeA,IAAUH,EAAWK,OAAQ,SAChE5B,EAAOW,SACR,cACG7B,2BAEH,YACGC,6BAMP,mBACOmB,EAAQf,oCAIZA,MAAOF,EAAUI,MACjBwC,SAAUzB,mCAGG,gCACA,gCACA,gCACA,gCACA,gCACA,sBAIbjB,MAAOF,EAAUG,MACjByC,SAAUtB,8HASR,wBACDhB,6BAEIQ"} |