diff --git a/src/components/Chart.vue b/src/components/Chart.vue
index 5ef071ac..1254bdfc 100644
--- a/src/components/Chart.vue
+++ b/src/components/Chart.vue
@@ -57,7 +57,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const chartRef = ref<HTMLElement | null>(null)
+    const chartRef = ref<HTMLElement>()
     const slideScale: Ref<number> = inject('slideScale') || ref(1)
 
     let chart: IChartistLineChart | IChartistBarChart | IChartistPieChart | undefined
diff --git a/src/components/ColorPicker/Alpha.vue b/src/components/ColorPicker/Alpha.vue
index 1526080a..f3e372df 100644
--- a/src/components/ColorPicker/Alpha.vue
+++ b/src/components/ColorPicker/Alpha.vue
@@ -40,7 +40,7 @@ export default defineComponent({
       return `linear-gradient(to right, rgba(${rgbaStr}, 0) 0%, rgba(${rgbaStr}, 1) 100%)`
     })
 
-    const alphaRef = ref<HTMLElement | null>(null)
+    const alphaRef = ref<HTMLElement>()
     const handleChange = (e: MouseEvent) => {
       e.preventDefault()
       if(!alphaRef.value) return
diff --git a/src/components/ColorPicker/Hue.vue b/src/components/ColorPicker/Hue.vue
index e4ee4927..6b81139c 100644
--- a/src/components/ColorPicker/Hue.vue
+++ b/src/components/ColorPicker/Hue.vue
@@ -54,7 +54,7 @@ export default defineComponent({
       oldHue.value = h
     })
 
-    const hueRef = ref<HTMLElement | null>(null)
+    const hueRef = ref<HTMLElement>()
     const handleChange = (e: MouseEvent) => {
       e.preventDefault()
       if(!hueRef.value) return
diff --git a/src/components/ColorPicker/Saturation.vue b/src/components/ColorPicker/Saturation.vue
index 27347556..5bd61b54 100644
--- a/src/components/ColorPicker/Saturation.vue
+++ b/src/components/ColorPicker/Saturation.vue
@@ -51,7 +51,7 @@ export default defineComponent({
       emit('change', param)
     }, 20, { leading: true, trailing: false })
 
-    const saturationRef = ref<HTMLElement | null>(null)
+    const saturationRef = ref<HTMLElement>()
     const handleChange = (e: MouseEvent) => {
       e.preventDefault()
       if(!saturationRef.value) return
diff --git a/src/components/FileInput.vue b/src/components/FileInput.vue
index f0eb92c9..fbffd7a2 100644
--- a/src/components/FileInput.vue
+++ b/src/components/FileInput.vue
@@ -24,7 +24,7 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    const inputRef = ref<HTMLInputElement | null>(null)
+    const inputRef = ref<HTMLInputElement>()
 
     const handleClick = () => {
       if(!inputRef.value) return
diff --git a/src/components/WritingBoard.vue b/src/components/WritingBoard.vue
index 2f7319c3..5b9a5a4e 100644
--- a/src/components/WritingBoard.vue
+++ b/src/components/WritingBoard.vue
@@ -51,8 +51,8 @@ export default defineComponent({
   },
   setup(props) {
     let ctx: CanvasRenderingContext2D | null = null
-    const writingBoardRef = ref<HTMLElement | null>(null)
-    const canvasRef = ref<HTMLCanvasElement | null>(null)
+    const writingBoardRef = ref<HTMLElement>()
+    const canvasRef = ref<HTMLCanvasElement>()
     let lastPos = {
       x: 0,
       y: 0,
diff --git a/src/views/Editor/Canvas/ElementCreateSelection.vue b/src/views/Editor/Canvas/ElementCreateSelection.vue
index ea1ad05a..6d2aa194 100644
--- a/src/views/Editor/Canvas/ElementCreateSelection.vue
+++ b/src/views/Editor/Canvas/ElementCreateSelection.vue
@@ -42,7 +42,7 @@ export default defineComponent({
     const start = ref<[number, number] | null>(null)
     const end = ref<[number, number] | null>(null)
 
-    const selectionRef = ref<HTMLElement | null>(null)
+    const selectionRef = ref<HTMLElement>()
     const offset = reactive({
       x: 0,
       y: 0,
diff --git a/src/views/Editor/Canvas/hooks/useDropImageOrText.ts b/src/views/Editor/Canvas/hooks/useDropImageOrText.ts
index e1b79ce1..2a466a9c 100644
--- a/src/views/Editor/Canvas/hooks/useDropImageOrText.ts
+++ b/src/views/Editor/Canvas/hooks/useDropImageOrText.ts
@@ -4,7 +4,7 @@ import { State } from '@/store'
 import { getImageDataURL } from '@/utils/image'
 import useCreateElement from '@/hooks/useCreateElement'
 
-export default (elementRef: Ref<HTMLElement | null>) => {
+export default (elementRef: Ref<HTMLElement | undefined>) => {
   const store = useStore<State>()
   const disableHotkeys = computed(() => store.state.disableHotkeys)
 
diff --git a/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts b/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts
index 2db29d27..9cfa511d 100644
--- a/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts
+++ b/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts
@@ -4,7 +4,7 @@ import { MutationTypes, State } from '@/store'
 import { CreateElementSelectionData, CreatingLineElement, CreatingShapeElement } from '@/types/edit'
 import useCreateElement from '@/hooks/useCreateElement'
 
-export default (viewportRef: Ref<HTMLElement | null>) => {
+export default (viewportRef: Ref<HTMLElement | undefined>) => {
   const store = useStore<State>()
   const canvasScale = computed(() => store.state.canvasScale)
   const creatingElement = computed(() => store.state.creatingElement)
diff --git a/src/views/Editor/Canvas/hooks/useMouseSelection.ts b/src/views/Editor/Canvas/hooks/useMouseSelection.ts
index 9b030cb8..baf46920 100644
--- a/src/views/Editor/Canvas/hooks/useMouseSelection.ts
+++ b/src/views/Editor/Canvas/hooks/useMouseSelection.ts
@@ -4,7 +4,7 @@ import { State, MutationTypes } from '@/store'
 import { PPTElement } from '@/types/slides'
 import { getElementRange } from '@/utils/element'
 
-export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | null>) => {
+export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | undefined>) => {
   const store = useStore<State>()
   const canvasScale = computed(() => store.state.canvasScale)
 
diff --git a/src/views/Editor/Canvas/hooks/useRotateElement.ts b/src/views/Editor/Canvas/hooks/useRotateElement.ts
index 44af8f43..37942ecc 100644
--- a/src/views/Editor/Canvas/hooks/useRotateElement.ts
+++ b/src/views/Editor/Canvas/hooks/useRotateElement.ts
@@ -13,7 +13,7 @@ const getAngleFromCoordinate = (x: number, y: number) => {
   return angle
 }
 
-export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | null>) => {
+export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | undefined>) => {
   const store = useStore<State>()
   const canvasScale = computed(() => store.state.canvasScale)
 
diff --git a/src/views/Editor/Canvas/hooks/useViewportSize.ts b/src/views/Editor/Canvas/hooks/useViewportSize.ts
index 92882873..318d2180 100644
--- a/src/views/Editor/Canvas/hooks/useViewportSize.ts
+++ b/src/views/Editor/Canvas/hooks/useViewportSize.ts
@@ -3,7 +3,7 @@ import { useStore } from 'vuex'
 import { State, MutationTypes } from '@/store'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
 
-export default (canvasRef: Ref<HTMLElement | null>) => {
+export default (canvasRef: Ref<HTMLElement | undefined>) => {
   const viewportLeft = ref(0)
   const viewportTop = ref(0)
 
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index 77522d2d..a2e910f3 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -127,7 +127,7 @@ export default defineComponent({
     const ctrlKeyState = computed(() => store.state.ctrlKeyState)
     const ctrlOrShiftKeyActive: Ref<boolean> = computed(() => store.getters.ctrlOrShiftKeyActive)
 
-    const viewportRef = ref<HTMLElement | null>(null)
+    const viewportRef = ref<HTMLElement>()
     const isShowGridLines = ref(false)
     const alignmentLines = ref<AlignmentLineProps[]>([])
 
@@ -143,7 +143,7 @@ export default defineComponent({
 
     useDropImageOrText(viewportRef)
 
-    const canvasRef = ref<HTMLElement | null>(null)
+    const canvasRef = ref<HTMLElement>()
     const canvasScale = computed(() => store.state.canvasScale)
     const { viewportStyles } = useViewportSize(canvasRef)
 
diff --git a/src/views/components/element/TextElement/index.vue b/src/views/components/element/TextElement/index.vue
index 96befe8f..0616b40c 100644
--- a/src/views/components/element/TextElement/index.vue
+++ b/src/views/components/element/TextElement/index.vue
@@ -82,7 +82,7 @@ export default defineComponent({
     const store = useStore<State>()
     const { addHistorySnapshot } = useHistorySnapshot()
 
-    const elementRef = ref<HTMLElement | null>(null)
+    const elementRef = ref<HTMLElement>()
 
     const isScaling = ref(false)
     const realHeightCache = ref(-1)
@@ -129,7 +129,7 @@ export default defineComponent({
       if(elementRef.value) resizeObserver.unobserve(elementRef.value)
     })
     
-    const editorViewRef = ref<Element | null>(null)
+    const editorViewRef = ref<HTMLElement>()
     let editorView: EditorView
 
     const handleFocus = () => {