diff --git a/packages/mirinae/src/components.ts b/packages/mirinae/src/components.ts
index f74a14c7ec..30dc6104b0 100644
--- a/packages/mirinae/src/components.ts
+++ b/packages/mirinae/src/components.ts
@@ -76,7 +76,7 @@ export { default as PSearch } from './controls/search/search/PSearch.vue';
 export { default as PSelectButton } from './controls/select-button/PSelectButton.vue';
 export { default as PSelectCard } from './controls/select-card/PSelectCard.vue';
 export { default as PSelectStatus } from './controls/select-status/PSelectStatus.vue';
-export { default as PTextEditor } from './controls/text-editor/PTextEditor.vue';
+export { default as PCodeEditor } from './controls/code-editor/PCodeEditor.vue';
 export { default as PTextarea } from './controls/textarea/PTextarea.vue';
 export { default as PSlider } from './controls/slider/PSlider.vue';
 export { default as PToolbox } from './controls/toolbox/PToolbox.vue';
diff --git a/packages/mirinae/src/controls/code-editor/PCodeEditor.mdx b/packages/mirinae/src/controls/code-editor/PCodeEditor.mdx
new file mode 100644
index 0000000000..a5315f99b4
--- /dev/null
+++ b/packages/mirinae/src/controls/code-editor/PCodeEditor.mdx
@@ -0,0 +1,58 @@
+{/* PCodeEditor.mdx */}
+
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as PCodeEditorStories from './PCodeEditor.stories';
+
+<Meta of={PCodeEditorStories} />
+
+
+# Code Editor
+<br/>
+<br/>
+
+
+## Basic
+<br/>
+<br/>
+<Canvas of={PCodeEditorStories.Basic} />
+
+<br/>
+<br/>
+
+## Loading
+<br/>
+<br/>
+<Canvas of={PCodeEditorStories.Loading} />
+
+<br/>
+<br/>
+
+## Highlight Lines
+<br/>
+<br/>
+<Canvas of={PCodeEditorStories.HighlightLines} />
+
+<br/>
+<br/>
+
+## Change Code
+<br/>
+<br/>
+<Canvas of={PCodeEditorStories.ChangeCode} />
+
+<br/>
+<br/>
+
+## Auto Reformat on Code Change (string only)
+<br/>
+<br/>
+<Canvas of={PCodeEditorStories.AutoReformatonCodeChangeStringOnly} />
+
+<br/>
+<br/>
+
+
+## Playground
+<Canvas of={PCodeEditorStories.Playground} />
+<Controls of={PCodeEditorStories.Playground} />
diff --git a/packages/mirinae/src/controls/text-editor/PTextEditor.stories.ts b/packages/mirinae/src/controls/code-editor/PCodeEditor.stories.ts
similarity index 78%
rename from packages/mirinae/src/controls/text-editor/PTextEditor.stories.ts
rename to packages/mirinae/src/controls/code-editor/PCodeEditor.stories.ts
index 9993678f99..37694bd125 100644
--- a/packages/mirinae/src/controls/text-editor/PTextEditor.stories.ts
+++ b/packages/mirinae/src/controls/code-editor/PCodeEditor.stories.ts
@@ -4,40 +4,41 @@ import type { Meta, StoryObj } from '@storybook/vue';
 import type { ComponentProps } from 'vue-component-type-helpers';
 
 import PButton from '@/controls/buttons/button/PButton.vue';
-import { getJsonObject } from '@/controls/text-editor/mock';
+import { getJsonObject } from '@/controls/code-editor/mock';
 import {
-    getTextEditorArgs, getTextEditorParameters, getTextEditorArgTypes, sampleCode,
-} from '@/controls/text-editor/story-helper';
+    getCodeEditorArgs, getCodeEditorParameters, getCodeEditorArgTypes, sampleCode,
+} from '@/controls/code-editor/story-helper';
 
-import PTextEditor from './PTextEditor.vue';
+import PCodeEditor from './PCodeEditor.vue';
 
-type PTextEditorPropsAndCustomArgs = ComponentProps<typeof PTextEditor>;
 
-const meta : Meta<PTextEditorPropsAndCustomArgs> = {
-    title: 'Controls/Text Editor',
-    component: PTextEditor,
+type PCodeEditorPropsAndCustomArgs = ComponentProps<typeof PCodeEditor>;
+
+const meta : Meta<PCodeEditorPropsAndCustomArgs> = {
+    title: 'Controls/Code Editor',
+    component: PCodeEditor,
     argTypes: {
-        ...getTextEditorArgTypes(),
+        ...getCodeEditorArgTypes(),
     },
     parameters: {
-        ...getTextEditorParameters(),
+        ...getCodeEditorParameters(),
     },
     args: {
-        ...getTextEditorArgs(),
+        ...getCodeEditorArgs(),
     },
 };
 
 export default meta;
-type Story = StoryObj<typeof PTextEditor>;
+type Story = StoryObj<typeof PCodeEditor>;
 
 
 const Template: Story = {
     render: (args, { argTypes }) => ({
         props: Object.keys(argTypes),
-        components: { PTextEditor },
+        components: { PCodeEditor },
         template: `
             <div class="h-full w-full overflow p-8">
-                <p-text-editor :code="code"
+                <p-code-editor :code="code"
                     :folded="folded"
                     :read-only="readOnly" :loading="loading"
                     :highlight-lines="highlightLines"
@@ -50,10 +51,10 @@ const Template: Story = {
 
 export const Basic: Story = {
     render: () => ({
-        components: { PTextEditor },
+        components: { PCodeEditor },
         template: `
             <div class="h-full w-full overflow p-8">
-                <p-text-editor :code="sampleCode" folded />
+                <p-code-editor :code="sampleCode" folded />
             </div>
         `,
         setup() {
@@ -69,10 +70,10 @@ export const Basic: Story = {
 
 export const Loading: Story = {
     render: () => ({
-        components: { PTextEditor, PButton },
+        components: { PCodeEditor, PButton },
         template: `
             <div class="h-full w-full overflow p-8">
-                <p-text-editor :loading="loading" :code="sampleCode" folded />
+                <p-code-editor :loading="loading" :code="sampleCode" folded />
                 <p-button class="mt-4" @click="changeCode">Load Code!</p-button>
             </div>
         `,
@@ -100,10 +101,10 @@ export const Loading: Story = {
 
 export const HighlightLines: Story = {
     render: () => ({
-        components: { PTextEditor },
+        components: { PCodeEditor },
         template: `
             <div class="h-full w-full overflow p-8">
-                <p-text-editor :code="sampleCode" folded :highlight-lines="[2,3,4]" />
+                <p-code-editor :code="sampleCode" folded :highlight-lines="[2,3,4]" />
             </div>
         `,
         setup() {
@@ -119,10 +120,10 @@ export const HighlightLines: Story = {
 
 export const ChangeCode: Story = {
     render: () => ({
-        components: { PTextEditor },
+        components: { PCodeEditor },
         template: `
             <div class="h-full w-full overflow p-8">
-                <p-text-editor :code="sampleCode" folded />
+                <p-code-editor :code="sampleCode" folded />
                 <button @click="handleChangeCode">Change Code!</button>
             </div>
         `,
@@ -143,10 +144,10 @@ export const ChangeCode: Story = {
 
 export const AutoReformatonCodeChangeStringOnly: Story = {
     render: () => ({
-        components: { PTextEditor, PButton },
+        components: { PCodeEditor, PButton },
         template: `
             <div class="h-full w-full overflow p-8">
-                <p-text-editor :code="sampleCode" folded :disable-auto-reformat="disableAutoReformat" class="mb-4" />
+                <p-code-editor :code="sampleCode" folded :disable-auto-reformat="disableAutoReformat" class="mb-4" />
                 <p-button @click="handleChangeCode(false)">Change Code & Reformat (default)</p-button>
                 <p-button style-type="highlight" @click="handleChangeCode(true)">Change Code & Do not Reformat Automatically</p-button>
             <p class="text-red-600 font-bold mt-4">This feature works only when the code prop's type is string</p>
diff --git a/packages/mirinae/src/controls/text-editor/PTextEditor.vue b/packages/mirinae/src/controls/code-editor/PCodeEditor.vue
similarity index 98%
rename from packages/mirinae/src/controls/text-editor/PTextEditor.vue
rename to packages/mirinae/src/controls/code-editor/PCodeEditor.vue
index f7984b3f9b..5726ca44b2 100644
--- a/packages/mirinae/src/controls/text-editor/PTextEditor.vue
+++ b/packages/mirinae/src/controls/code-editor/PCodeEditor.vue
@@ -5,7 +5,7 @@
 * */
 
 /**
- * PTextEditor can get any types,
+ * PCodeEditor can get any types,
  * CodeMirror can get String ONLY
  */
 import {
@@ -183,7 +183,7 @@ const textareaRef = toRef(state, 'textareaRef');
 </script>
 
 <template>
-    <div class="p-text-editor">
+    <div class="p-code-editor">
         <p-data-loader :data="true"
                        :loading="props.loading"
                        disable-empty-case
@@ -203,7 +203,7 @@ const textareaRef = toRef(state, 'textareaRef');
 @import 'codemirror/theme/dracula.css';
 @import 'codemirror/addon/lint/lint.css';
 @import 'codemirror/addon/fold/foldgutter.css';
-.p-text-editor {
+.p-code-editor {
     height: 100%;
     min-height: 5rem;
     > .p-data-loader {
diff --git a/packages/mirinae/src/controls/text-editor/mock.ts b/packages/mirinae/src/controls/code-editor/mock.ts
similarity index 100%
rename from packages/mirinae/src/controls/text-editor/mock.ts
rename to packages/mirinae/src/controls/code-editor/mock.ts
diff --git a/packages/mirinae/src/controls/text-editor/story-helper.ts b/packages/mirinae/src/controls/code-editor/story-helper.ts
similarity index 95%
rename from packages/mirinae/src/controls/text-editor/story-helper.ts
rename to packages/mirinae/src/controls/code-editor/story-helper.ts
index 9471ec7e5a..0544be6d05 100644
--- a/packages/mirinae/src/controls/text-editor/story-helper.ts
+++ b/packages/mirinae/src/controls/code-editor/story-helper.ts
@@ -24,14 +24,14 @@ const sampleCodeObj = {
 };
 export const sampleCode = JSON.stringify(sampleCodeObj, null, ' ');
 
-export const getTextEditorParameters = (): Parameters => ({
+export const getCodeEditorParameters = (): Parameters => ({
     design: {
         type: 'figma',
         url: 'https://www.figma.com/file/wq4wSowBcADBuUrMEZLz6i/SpaceONE-Console-Design?node-id=6169%3A182308',
     },
 });
 
-export const getTextEditorArgs = (): Args => ({
+export const getCodeEditorArgs = (): Args => ({
     code: sampleCode,
     options: {
         tabSize: 4,
@@ -55,7 +55,7 @@ export const getTextEditorArgs = (): Args => ({
     loader: null,
 });
 
-export const getTextEditorArgTypes = (): ArgTypes => ({
+export const getCodeEditorArgTypes = (): ArgTypes => ({
     code: {
         name: 'code',
         description: 'Code',
@@ -88,7 +88,7 @@ export const getTextEditorArgTypes = (): ArgTypes => ({
     readOnly: {
         name: 'readOnly',
         type: { name: 'boolean' },
-        description: 'Whether Mode of text editor is ReadOnly',
+        description: 'Whether Mode of code editor is ReadOnly',
         defaultValue: false,
         table: {
             type: {
diff --git a/packages/mirinae/src/controls/context-menu/PContextMenu.stories.ts b/packages/mirinae/src/controls/context-menu/PContextMenu.stories.ts
index 829859339b..30a04227a1 100644
--- a/packages/mirinae/src/controls/context-menu/PContextMenu.stories.ts
+++ b/packages/mirinae/src/controls/context-menu/PContextMenu.stories.ts
@@ -5,9 +5,9 @@ import type { ComponentProps } from 'vue-component-type-helpers';
 
 import PButton from '@/controls/buttons/button/PButton.vue';
 import PToggleButton from '@/controls/buttons/toggle-button/PToggleButton.vue';
+import PCodeEditor from '@/controls/code-editor/PCodeEditor.vue';
 import { menuItems, longMenuItems, getContextMenuItems } from '@/controls/context-menu/mock';
 import { getContextMenuArgTypes, getContextMenuArgs, getContextMenuParameters } from '@/controls/context-menu/story-helper';
-import PTextEditor from '@/controls/text-editor/PTextEditor.vue';
 import PEmpty from '@/data-display/empty/PEmpty.vue';
 import PI from '@/foundation/icons/PI.vue';
 import { getTextHighlightRegex } from '@/utils/helpers';
@@ -188,7 +188,7 @@ export const HeaderSlot: Story = {
 export const NoDataSlot: Story = {
     render: () => ({
         props: Object.keys(getContextMenuArgTypes()),
-        components: { PContextMenu, PEmpty, PTextEditor },
+        components: { PContextMenu, PEmpty, PCodeEditor },
         template: `
             <div class="flex h-full flex-col">
                 <div class="mt-4">
@@ -209,7 +209,7 @@ export const NoDataSlot: Story = {
 export const MenuSlot: Story = {
     render: () => ({
         props: Object.keys(getContextMenuArgTypes()),
-        components: { PContextMenu, PTextEditor },
+        components: { PContextMenu, PCodeEditor },
         template: `
             <div class="flex h-full flex-col">
                 <div class="mt-4">
@@ -233,7 +233,7 @@ export const MenuSlot: Story = {
                             <pre ref="slotPropsRef">{{slotProps}}</pre>
                         </template>
                     </p-context-menu>
-                    <p-text-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
+                    <p-code-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
                 </div>
             </div>
         <!--<div>-->
@@ -257,7 +257,7 @@ export const MenuSlot: Story = {
 export const ItemSlots: Story = {
     render: () => ({
         props: Object.keys(getContextMenuArgTypes()),
-        components: { PContextMenu, PI, PTextEditor },
+        components: { PContextMenu, PI, PCodeEditor },
         template: `
             <div class="flex h-full flex-col">
                 <div class="mt-4">
@@ -278,7 +278,7 @@ export const ItemSlots: Story = {
                             <pre ref="slotPropsRef">{{slotProps}}</pre>
                         </template>
                     </p-context-menu>
-                    <p-text-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
+                    <p-code-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
                 </div>
             </div>
         <!--<div>-->
@@ -302,7 +302,7 @@ export const ItemSlots: Story = {
 export const HeaderSlots: Story = {
     render: () => ({
         props: Object.keys(getContextMenuArgTypes()),
-        components: { PContextMenu, PI, PTextEditor },
+        components: { PContextMenu, PI, PCodeEditor },
         template: `
             <div class="flex h-full flex-col">
                 <div class="mt-4">
@@ -323,7 +323,7 @@ export const HeaderSlots: Story = {
                             <pre ref="slotPropsRef">{{slotProps}}</pre>
                         </template>
                     </p-context-menu>
-                    <p-text-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
+                    <p-code-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
                 </div>
             </div>
             <!--<div>-->
@@ -367,7 +367,7 @@ export const BottomSlot: Story = {
 export const SearchSlots: Story = {
     render: () => ({
         props: Object.keys(getContextMenuArgTypes()),
-        components: { PContextMenu, PEmpty, PTextEditor },
+        components: { PContextMenu, PEmpty, PCodeEditor },
         template: `
             <div class="flex h-full flex-col">
                 <div class="mt-4">
@@ -420,7 +420,7 @@ export const ItemsHeightFixed: Story = {
 export const HighlightTermAndItemTextListSlot: Story = {
     render: () => ({
         props: Object.keys(getContextMenuArgTypes()),
-        components: { PContextMenu, PTextEditor },
+        components: { PContextMenu, PCodeEditor },
         template: `
             <div>
                 <p class="text-lg my-4">highlight term: 'o'</p>
@@ -432,7 +432,7 @@ export const HighlightTermAndItemTextListSlot: Story = {
                     </template>
                 </p-context-menu>
                 <p class="text-lg my-4">The last item's <strong>Slot Props</strong> for <strong>item-text-list</strong> slot with highlight term: 'o'</p>
-                <p-text-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
+                <p-code-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
                 <p-context-menu v-show="false" :menu="menu" highlight-term="o">
                     <template #item-text-list="slotProps">
                         <pre ref="slotPropsRef">{{slotProps}}</pre>
diff --git a/packages/mirinae/src/controls/dropdown/select-dropdown/PSelectDropdown.stories.ts b/packages/mirinae/src/controls/dropdown/select-dropdown/PSelectDropdown.stories.ts
index bd34eae5e4..931fa00f6f 100644
--- a/packages/mirinae/src/controls/dropdown/select-dropdown/PSelectDropdown.stories.ts
+++ b/packages/mirinae/src/controls/dropdown/select-dropdown/PSelectDropdown.stories.ts
@@ -5,6 +5,7 @@ import type { ComponentProps } from 'vue-component-type-helpers';
 
 import PButton from '@/controls/buttons/button/PButton.vue';
 import PToggleButton from '@/controls/buttons/toggle-button/PToggleButton.vue';
+import PCodeEditor from '@/controls/code-editor/PCodeEditor.vue';
 import { menuItems } from '@/controls/context-menu/mock';
 import {
     getSelectDropdownMenu,
@@ -16,7 +17,6 @@ import {
     getSelectDropdownParameters,
 } from '@/controls/dropdown/select-dropdown/story-helper';
 import { SELECT_DROPDOWN_STYLE_TYPE } from '@/controls/dropdown/select-dropdown/type';
-import PTextEditor from '@/controls/text-editor/PTextEditor.vue';
 import { useProxyValue } from '@/hooks/use-proxy-state/use-proxy-state';
 
 import PSelectDropdown from './PSelectDropdown.vue';
@@ -649,7 +649,7 @@ export const IsFilterable: Story = {
 export const ShowRelatedHeadertotheSelectedZone: Story = {
     render: () => ({
         props: Object.keys(getSelectDropdownArgTypes()),
-        components: { PSelectDropdown, PButton, PTextEditor },
+        components: { PSelectDropdown, PButton, PCodeEditor },
         template: `
             <div>
                 <p class="text-label-lg font-bold my-3">show headers</p>
@@ -659,7 +659,7 @@ export const ShowRelatedHeadertotheSelectedZone: Story = {
                 <p-select-dropdown :menu="menu" multi-selectable is-filterable hide-header-without-items />
                 <br/>
                 <br/>
-                <p-text-editor :code="JSON.stringify(menu, null, 2)"
+                <p-code-editor :code="JSON.stringify(menu, null, 2)"
                             mode="readOnly"
                             style="height: 200px; max-height: 400px;"
                 />
diff --git a/packages/mirinae/src/controls/forms/json-schema-form/PJsonSchemaForm.stories.ts b/packages/mirinae/src/controls/forms/json-schema-form/PJsonSchemaForm.stories.ts
index a3a17dec12..2af2dfa5f2 100644
--- a/packages/mirinae/src/controls/forms/json-schema-form/PJsonSchemaForm.stories.ts
+++ b/packages/mirinae/src/controls/forms/json-schema-form/PJsonSchemaForm.stories.ts
@@ -17,7 +17,7 @@ import {
 } from '@/controls/forms/json-schema-form/mock';
 
 import { VALIDATION_MODES } from '@/controls/forms/json-schema-form/type';
-import PTextEditor from '@/controls/text-editor/PTextEditor.vue';
+import PCodeEditor from '@/controls/code-editor/PCodeEditor.vue';
 import {
     getSelectDropdownMenuWithMultiTypes,
 } from '@/controls/dropdown/select-dropdown/mock';
@@ -103,7 +103,7 @@ const Template: Story = {
 
 export const Basic: Story = {
     render: () => ({
-        components: { PJsonSchemaForm, PTextEditor, PHeading },
+        components: { PJsonSchemaForm, PCodeEditor, PHeading },
         i18n: I18nConnector.i18n,
         template: `
             <div class="flex gap-4">
@@ -117,13 +117,13 @@ export const Basic: Story = {
             </div>
             <div class="bg-coral-100 p-4">
                 <p-heading class="mb-6">Schema</p-heading>
-                <p-text-editor :code="JSON.stringify(schema, null, 2)"
+                <p-code-editor :code="JSON.stringify(schema, null, 2)"
                                mode="readOnly"
                                folded
                                style="height: auto"
                 />
                 <p-heading class="mb-6">Form Data</p-heading>
-                <p-text-editor :code="JSON.stringify(formData, null, 2)"
+                <p-code-editor :code="JSON.stringify(formData, null, 2)"
                                mode="readOnly"
                                style="height: auto"
                 />
@@ -146,7 +146,7 @@ export const Basic: Story = {
 
 export const Language: Story = {
     render: () => ({
-        components: { PJsonSchemaForm, PTextEditor, PSelectDropdown },
+        components: { PJsonSchemaForm, PCodeEditor, PSelectDropdown },
         template: `
             <div class="flex gap-4">
             <p-json-schema-form
@@ -159,7 +159,7 @@ export const Language: Story = {
                                    :selected="language"
                                    :menu="languages"
                 />
-                <p-text-editor :code="JSON.stringify(schema, null, 2)"
+                <p-code-editor :code="JSON.stringify(schema, null, 2)"
                                mode="readOnly"
                                folded
                 />
@@ -183,7 +183,7 @@ export const Language: Story = {
 
 export const ResetonSchemaChange: Story = {
     render: () => ({
-        components: { PJsonSchemaForm, PTextEditor, PButton },
+        components: { PJsonSchemaForm, PCodeEditor, PButton },
         i18n: I18nConnector.i18n,
         template: `
             <div class="flex gap-4">
@@ -198,7 +198,7 @@ export const ResetonSchemaChange: Story = {
                 <p-button style-type="highlight"
                           class="mb-4"
                           @click="changeFormData">Change Form Data</p-button>
-                <p-text-editor :code="JSON.stringify(schema, null, 2)"
+                <p-code-editor :code="JSON.stringify(schema, null, 2)"
                                mode="readOnly"
                                folded
                 />
@@ -229,7 +229,7 @@ export const ResetonSchemaChange: Story = {
 export const ValidationMode: Story = {
     render: () => ({
         components: {
-            PJsonSchemaForm, PTextEditor, PSelectDropdown, PHeading,
+            PJsonSchemaForm, PCodeEditor, PSelectDropdown, PHeading,
         },
         i18n: I18nConnector.i18n,
         template: `
@@ -245,12 +245,12 @@ export const ValidationMode: Story = {
                 <p-select-dropdown class="mb-4"
                                    :selected="validationMode" :menu="validationModes" />
                 <p-heading class="mb-6">Schema</p-heading>
-                <p-text-editor :code="JSON.stringify(schema, null, 2)"
+                <p-code-editor :code="JSON.stringify(schema, null, 2)"
                                mode="readOnly"
                                folded
                 />
                 <p-heading class="mb-6">Form Data</p-heading>
-                <p-text-editor :code="JSON.stringify(formData, null, 2)"
+                <p-code-editor :code="JSON.stringify(formData, null, 2)"
                                mode="readOnly"
                                style="height: auto"
                 />
@@ -274,7 +274,7 @@ export const ValidationMode: Story = {
 
 export const JsonInputMode: Story = {
     render: () => ({
-        components: { PJsonSchemaForm, PTextEditor, PHeading },
+        components: { PJsonSchemaForm, PCodeEditor, PHeading },
         i18n: I18nConnector.i18n,
         template: `
             <div class="grid gap-4 grid-cols-12">
@@ -287,13 +287,13 @@ export const JsonInputMode: Story = {
             </div>
             <div class="col-span-6 bg-coral-100 p-4">
                 <p-heading class="mb-6">Schema</p-heading>
-                <p-text-editor :code="JSON.stringify(schema, null, 2)"
+                <p-code-editor :code="JSON.stringify(schema, null, 2)"
                                mode="readOnly"
                                folded
                                style="height: auto"
                 />
                 <p-heading class="mt-4 mb-6">Form Data</p-heading>
-                <p-text-editor :code="JSON.stringify(formData, null, 2)"
+                <p-code-editor :code="JSON.stringify(formData, null, 2)"
                                mode="readOnly"
                                style="height: auto"
                 />
@@ -315,7 +315,7 @@ export const JsonInputMode: Story = {
 
 export const UniformWidth: Story = {
     render: () => ({
-        components: { PJsonSchemaForm, PTextEditor, PHeading },
+        components: { PJsonSchemaForm, PCodeEditor, PHeading },
         i18n: I18nConnector.i18n,
         template: `
             <div class="flex gap-4">
diff --git a/packages/mirinae/src/controls/forms/json-schema-form/PJsonSchemaForm.vue b/packages/mirinae/src/controls/forms/json-schema-form/PJsonSchemaForm.vue
index 70d0b2c5f2..2dd864a375 100644
--- a/packages/mirinae/src/controls/forms/json-schema-form/PJsonSchemaForm.vue
+++ b/packages/mirinae/src/controls/forms/json-schema-form/PJsonSchemaForm.vue
@@ -8,7 +8,7 @@
                        :class="{'no-margin': !isRoot}"
                        :invalid="getJsonInputInvalidState()"
         >
-            <p-text-editor :code="jsonInputData"
+            <p-code-editor :code="jsonInputData"
                            disable-auto-reformat
                            :read-only="schema.disabled"
                            @update:code="handleUpdateJsonData(schema, $event)"
@@ -167,6 +167,7 @@ import addFormats from 'ajv-formats';
 import { isEqual } from 'lodash';
 
 import PToggleButton from '@/controls/buttons/toggle-button/PToggleButton.vue';
+import PCodeEditor from '@/controls/code-editor/PCodeEditor.vue';
 import PSelectDropdown from '@/controls/dropdown/select-dropdown/PSelectDropdown.vue';
 import PFieldGroup from '@/controls/forms/field-group/PFieldGroup.vue';
 import GenerateIdFormat from '@/controls/forms/json-schema-form/components/GenerateIdFormat.vue';
@@ -189,11 +190,11 @@ import type {
 } from '@/controls/forms/json-schema-form/type';
 import { VALIDATION_MODES } from '@/controls/forms/json-schema-form/type';
 import PTextInput from '@/controls/input/text-input/PTextInput.vue';
-import PTextEditor from '@/controls/text-editor/PTextEditor.vue';
 import PMarkdown from '@/data-display/markdown/PMarkdown.vue';
 import type { SupportLanguage } from '@/translations';
 import { supportLanguages } from '@/translations';
 
+
 const PJsonSchemaForm = () => ({
     // eslint-disable-next-line import/no-self-import
     component: import('./PJsonSchemaForm.vue'),
@@ -204,7 +205,7 @@ export default defineComponent<JsonSchemaFormProps>({
         PEMKeyFormat,
         PJsonSchemaForm,
         PSelectDropdown,
-        PTextEditor,
+        PCodeEditor,
         GenerateIdFormat,
         PMarkdown,
         PFieldGroup,
diff --git a/packages/mirinae/src/controls/forms/json-schema-form/components/PEMKeyFormat.vue b/packages/mirinae/src/controls/forms/json-schema-form/components/PEMKeyFormat.vue
index bd857c343c..9a5991ff43 100644
--- a/packages/mirinae/src/controls/forms/json-schema-form/components/PEMKeyFormat.vue
+++ b/packages/mirinae/src/controls/forms/json-schema-form/components/PEMKeyFormat.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import PTextEditor from '@/controls/text-editor/PTextEditor.vue';
+import PCodeEditor from '@/controls/code-editor/PCodeEditor.vue';
 
 interface Props {
     readonly: any;
@@ -18,7 +18,7 @@ const handleUpdateData = (code: string) => {
 
 <template>
     <div>
-        <p-text-editor :code="props.value"
+        <p-code-editor :code="props.value"
                        disable-auto-reformat
                        :read-only="props.readonly"
                        @update:code="handleUpdateData"
diff --git a/packages/mirinae/src/controls/input/text-input/PTextInput.stories.ts b/packages/mirinae/src/controls/input/text-input/PTextInput.stories.ts
index 329a79b2ee..34434aea12 100644
--- a/packages/mirinae/src/controls/input/text-input/PTextInput.stories.ts
+++ b/packages/mirinae/src/controls/input/text-input/PTextInput.stories.ts
@@ -5,6 +5,7 @@ import Fuse from 'fuse.js';
 import type { ComponentProps } from 'vue-component-type-helpers';
 
 import PButton from '@/controls/buttons/button/PButton.vue';
+import PCodeEditor from '@/controls/code-editor/PCodeEditor.vue';
 import PFieldGroup from '@/controls/forms/field-group/PFieldGroup.vue';
 import { getTextInputMenu, getTextInputMenuWithMultiTypes } from '@/controls/input/text-input/mock';
 import {
@@ -13,10 +14,10 @@ import {
     getTextInputParameters,
 } from '@/controls/input/text-input/story-helper';
 import { INPUT_SIZE } from '@/controls/input/text-input/type';
-import PTextEditor from '@/controls/text-editor/PTextEditor.vue';
 
 import PTextInput from './PTextInput.vue';
 
+
 type PTextInputPropsAndCustomArgs = ComponentProps<typeof PTextInput>;
 
 const meta : Meta<PTextInputPropsAndCustomArgs> = {
@@ -443,7 +444,7 @@ export const Slots: Story = {
 export const InputAttributes: Story = {
     render: () => ({
         components: {
-            PTextInput, PTextEditor, PButton, PFieldGroup,
+            PTextInput, PCodeEditor, PButton, PFieldGroup,
         },
         template: `
             <div>
@@ -452,7 +453,7 @@ export const InputAttributes: Story = {
                     :invalid="!!errorMessage"
                     :invalid-text="errorMessage"
                 >
-                    <p-text-editor :code="JSON.stringify(attributes, null, 2)"
+                    <p-code-editor :code="JSON.stringify(attributes, null, 2)"
                                    @update:code="handleUpdateCode"
                     />
                 </p-field-group>
diff --git a/packages/mirinae/src/controls/text-editor/PTextEditor.mdx b/packages/mirinae/src/controls/text-editor/PTextEditor.mdx
deleted file mode 100644
index 42f26d4bf2..0000000000
--- a/packages/mirinae/src/controls/text-editor/PTextEditor.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
-{/* PTextEditor.mdx */}
-
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-
-import * as PTextEditorStories from './PTextEditor.stories';
-
-<Meta of={PTextEditorStories} />
-
-
-# Text Editor
-<br/>
-<br/>
-
-
-## Basic
-<br/>
-<br/>
-<Canvas of={PTextEditorStories.Basic} />
-
-<br/>
-<br/>
-
-## Loading
-<br/>
-<br/>
-<Canvas of={PTextEditorStories.Loading} />
-
-<br/>
-<br/>
-
-## Highlight Lines
-<br/>
-<br/>
-<Canvas of={PTextEditorStories.HighlightLines} />
-
-<br/>
-<br/>
-
-## Change Code
-<br/>
-<br/>
-<Canvas of={PTextEditorStories.ChangeCode} />
-
-<br/>
-<br/>
-
-## Auto Reformat on Code Change (string only)
-<br/>
-<br/>
-<Canvas of={PTextEditorStories.AutoReformatonCodeChangeStringOnly} />
-
-<br/>
-<br/>
-
-
-## Playground
-<Canvas of={PTextEditorStories.Playground} />
-<Controls of={PTextEditorStories.Playground} />
diff --git a/packages/mirinae/src/data-display/dynamic/dynamic-layout/templates/raw/index.vue b/packages/mirinae/src/data-display/dynamic/dynamic-layout/templates/raw/index.vue
index d95aa808ef..49e12f1d42 100644
--- a/packages/mirinae/src/data-display/dynamic/dynamic-layout/templates/raw/index.vue
+++ b/packages/mirinae/src/data-display/dynamic/dynamic-layout/templates/raw/index.vue
@@ -6,7 +6,7 @@
         >
             {{ layoutName }}
         </p-heading>
-        <p-text-editor class="m-4"
+        <p-code-editor class="m-4"
                        :code="rootData"
                        :loading="loading"
                        folded
@@ -21,16 +21,17 @@ import {
 } from 'vue';
 import type { Vue } from 'vue/types/vue';
 
-import PTextEditor from '@/controls/text-editor/PTextEditor.vue';
+import PCodeEditor from '@/controls/code-editor/PCodeEditor.vue';
 import type { RawDynamicLayoutProps } from '@/data-display/dynamic/dynamic-layout/templates/raw/type';
 import { getValueByPath } from '@/data-display/dynamic/helper';
 import PHeading from '@/data-display/heading/PHeading.vue';
 
+
 export default {
     name: 'PDynamicLayoutRaw',
     components: {
         PHeading,
-        PTextEditor,
+        PCodeEditor,
     },
     props: {
         name: {
diff --git a/packages/mirinae/src/navigation/tabs/tab/PTab.stories.ts b/packages/mirinae/src/navigation/tabs/tab/PTab.stories.ts
index c3085779b0..928be755a1 100644
--- a/packages/mirinae/src/navigation/tabs/tab/PTab.stories.ts
+++ b/packages/mirinae/src/navigation/tabs/tab/PTab.stories.ts
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/vue';
 import type { ComponentProps } from 'vue-component-type-helpers';
 
 import PButton from '@/controls/buttons/button/PButton.vue';
-import PTextEditor from '@/controls/text-editor/PTextEditor.vue';
+import PCodeEditor from '@/controls/code-editor/PCodeEditor.vue';
 import PBadge from '@/data-display/badge/PBadge.vue';
 import { useProxyValue } from '@/hooks';
 import {
@@ -121,7 +121,7 @@ export const Stretch: Story = {
 
 export const TabMenuType: Story = {
     render: () => ({
-        components: { PTab, PTextEditor },
+        components: { PTab, PCodeEditor },
         template: `
             <div class="w-full p-8">
                 <p-tab
@@ -130,7 +130,7 @@ export const TabMenuType: Story = {
                 />
                 <br/>
                 <br/>
-                <p-text-editor :code="JSON.stringify(tabs, null, 2)"
+                <p-code-editor :code="JSON.stringify(tabs, null, 2)"
                                mode="readOnly"
                                style="height: 200px; max-height: 400px;"
                 />