feat: add a title input box in the editor

ui/console-src/modules/contents/pages/SinglePageEditor.vue

@@ -21,10 +21,10 @@ import {
  ref,
  toRef,
  type ComputedRef,
+ watch,
 } from "vue";
 import { apiClient } from "@/utils/api-client";
 import { useRouteQuery } from "@vueuse/router";
-import { cloneDeep } from "lodash-es";
 import { useRouter } from "vue-router";
 import { randomUUID } from "@/utils/id";
 import { useContentCache } from "@/composables/use-content-cache";
@@ -69,7 +69,7 @@ const handleChangeEditorProvider = async (provider: EditorProvider) => {
 };
 
 // SinglePage form
-const initialFormState: SinglePageRequest = {
+const formState = ref<SinglePageRequest>({
  page: {
  spec: {
  title: "",
@@ -101,13 +101,19 @@ const initialFormState: SinglePageRequest = {
  content: "",
  rawType: "HTML",
  },
-};
-
-const formState = ref<SinglePageRequest>(cloneDeep(initialFormState));
+});
 const saving = ref(false);
 const publishing = ref(false);
 const settingModal = ref(false);
 
+const title = ref("");
+watch(
+ () => formState.value.page.spec.title,
+ (value) => {
+ title.value = value;
+ }
+);
+
 const isUpdateMode = computed(() => {
  return !!formState.value.page.metadata.creationTimestamp;
 });
@@ -143,6 +149,13 @@ const handleSave = async (options?: { mute?: boolean }) => {
  }
 
  if (isUpdateMode.value) {
+ if (title.value !== formState.value.page.spec.title) {
+ formState.value.page.spec.title = title.value;
+ formState.value.page = (
+ await singlePageUpdateMutate(formState.value.page)
+ ).data;
+ }
+
  const { data } = await apiClient.singlePage.updateSinglePageContent({
  name: formState.value.page.metadata.name,
  content: formState.value.content,
@@ -152,6 +165,8 @@ const handleSave = async (options?: { mute?: boolean }) => {
  } else {
  // Clear new page content cache
  handleClearCache();
+
+ formState.value.page.spec.title = title.value;
  const { data } = await apiClient.singlePage.draftSinglePage({
  singlePageRequest: formState.value,
  });
@@ -477,6 +492,7 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
  v-if="currentEditorProvider"
  v-model:raw="formState.content.raw"
  v-model:content="formState.content.content"
+ v-model:title="title"
  :upload-image="handleUploadImage"
  class="h-full"
  @update="handleSetContentCache"

ui/console-src/modules/contents/posts/PostEditor.vue

@@ -21,8 +21,8 @@ import {
  ref,
  toRef,
  type ComputedRef,
+ watch,
 } from "vue";
-import { cloneDeep } from "lodash-es";
 import { apiClient } from "@/utils/api-client";
 import { useRouteQuery } from "@vueuse/router";
 import { useRouter } from "vue-router";
@@ -80,7 +80,7 @@ interface PostRequestWithContent extends PostRequest {
 }
 
 // Post form
-const initialFormState: PostRequestWithContent = {
+const formState = ref<PostRequestWithContent>({
  post: {
  spec: {
  title: "",
@@ -114,13 +114,19 @@ const initialFormState: PostRequestWithContent = {
  content: "",
  rawType: "HTML",
  },
-};
-
-const formState = ref<PostRequestWithContent>(cloneDeep(initialFormState));
+});
 const settingModal = ref(false);
 const saving = ref(false);
 const publishing = ref(false);
 
+const title = ref("");
+watch(
+ () => formState.value.post.spec.title,
+ (value) => {
+ title.value = value;
+ }
+);
+
 const isUpdateMode = computed(() => {
  return !!formState.value.post.metadata.creationTimestamp;
 });
@@ -155,6 +161,14 @@ const handleSave = async (options?: { mute?: boolean }) => {
  }
 
  if (isUpdateMode.value) {
+ // Save post title
+ if (title.value !== formState.value.post.spec.title) {
+ formState.value.post.spec.title = title.value;
+ formState.value.post = (
+ await postUpdateMutate(formState.value.post)
+ ).data;
+ }
+
  const { data } = await apiClient.post.updatePostContent({
  name: formState.value.post.metadata.name,
  content: formState.value.content,
@@ -164,6 +178,8 @@ const handleSave = async (options?: { mute?: boolean }) => {
  } else {
  // Clear new post content cache
  handleClearCache();
+
+ formState.value.post.spec.title = title.value;
  const { data } = await apiClient.post.draftPost({
  postRequest: formState.value,
  });
@@ -503,6 +519,7 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
  v-if="currentEditorProvider"
  v-model:raw="formState.content.raw"
  v-model:content="formState.content.content"
+ v-model:title="title"
  :upload-image="handleUploadImage"
  class="h-full"
  @update="handleSetContentCache"

ui/packages/editor/src/components/Editor.vue

@@ -37,14 +37,20 @@ watch(
  <editor-bubble-menu :editor="editor" />
  <editor-header :editor="editor" />
  <div class="h-full flex flex-row w-full overflow-hidden">
- <editor-content
- :editor="editor"
- :style="contentStyles"
- class="editor-content markdown-body flex-1 relative bg-white overflow-y-auto"
- />
+ <div class="overflow-y-auto flex-1 bg-white">
+ <div v-if="$slots.content" class="editor-header-extra">
+ <slot name="content" />
+ </div>
+
+ <editor-content
+ :editor="editor"
+ :style="contentStyles"
+ class="editor-content markdown-body relative"
+ />
+ </div>
  <div
  v-if="$slots.extra"
- class="h-full hidden sm:!block w-72 flex-shrink-0"
+ class="h-full hidden sm:!block w-72 flex-shrink-0 flex-none"
  >
  <slot name="extra"></slot>
  </div>

ui/packages/editor/src/extensions/search-and-replace/SearchAndReplacePlugin.ts

@@ -30,15 +30,24 @@ export class SearchAndReplacePluginView {
 
  public containerElement: HTMLElement;
 
+ public init: boolean;
+
  constructor({ view, editor, element }: SearchAndReplacePluginViewProps) {
  this.editor = editor;
  this.view = view;
  this.containerElement = element;
- const { element: editorElement } = this.editor.options;
- editorElement.insertAdjacentElement("afterbegin", this.containerElement);
+ this.init = false;
  }
 
  update() {
+ const { parentElement: editorParentElement } = this.editor.options.element;
+ if (!this.init && editorParentElement) {
+ editorParentElement.insertAdjacentElement(
+ "afterbegin",
+ this.containerElement
+ );
+ this.init = true;
+ }
  return false;
  }
 

ui/packages/editor/src/styles/base.scss

@@ -10,6 +10,11 @@
  height: 48px;
  }
 
+ .editor-header-extra {
+ width: 100%;
+ padding: $editorVerticalPadding 20px;
+ }
+
  .editor-content {
  width: 100%;
  position: relative;
@@ -78,7 +83,8 @@
  }
 
  @media screen {
- .ProseMirror {
+ .ProseMirror,
+ .editor-header-extra {
  @media (min-width: 640px) {
  padding: $editorVerticalPadding min($editorHorizontalPadding, 10%) !important;
  }

ui/src/components/editor/DefaultEditor.vue

@@ -104,6 +104,7 @@ const { currentUserHasPermission } = usePermission();
 
 const props = withDefaults(
  defineProps<{
+ title?: string;
  raw?: string;
  content: string;
  uploadImage?: (
@@ -112,13 +113,15 @@ const props = withDefaults(
  ) => Promise<Attachment>;
  }>(),
  {
+ title: "",
  raw: "",
  content: "",
  uploadImage: undefined,
  }
 );
 
 const emit = defineEmits<{
+ (event: "update:title", value: string): void;
  (event: "update:raw", value: string): void;
  (event: "update:content", value: string): void;
  (event: "update", value: string): void;
@@ -404,7 +407,6 @@ onMounted(() => {
  UiExtensionUpload,
  ExtensionSearchAndReplace,
  ],
- autofocus: "start",
  parseOptions: {
  preserveWhitespace: true,
  },
@@ -441,6 +443,10 @@ const currentLocale = i18n.global.locale.value as
  | "en"
  | "zh"
  | "en-US";
+
+function onTitleInput(event: Event) {
+ emit("update:title", (event.target as HTMLInputElement).value);
+}
 </script>
 
 <template>
@@ -452,6 +458,17 @@ const currentLocale = i18n.global.locale.value as
  @close="handleCloseAttachmentSelectorModal"
  />
  <RichTextEditor v-if="editor" :editor="editor" :locale="currentLocale">
+ <template #content>
+ <input
+ :value="title"
+ type="text"
+ autofocus
+ :placeholder="$t('core.components.default_editor.title_placeholder')"
+ class="w-full border-x-0 !border-b border-t-0 !border-solid !border-gray-100 p-0 !py-2 text-4xl font-semibold placeholder:text-gray-300"
+ @input="onTitleInput"
+ @keydown.enter="() => editor?.commands.focus('start')"
+ />
+ </template>
  <template v-if="showSidebar" #extra>
  <OverlayScrollbarsComponent
  element="div"

ui/src/locales/en.yaml

@@ -1414,6 +1414,7 @@ core:
  toolbox:
  attachment: Attachment
  show_hide_sidebar: Show/Hide Sidebar
+ title_placeholder: Please enter the title
  global_search:
  placeholder: Enter keywords to search
  no_results: No search results

ui/src/locales/zh-CN.yaml

@@ -436,7 +436,7 @@ core:
  description: 该操作会将自定义页面恢复到被删除之前的状态。
  page_editor:
  title: 页面编辑
- untitled: Untitled page
+ untitled: 未命名页面
  comment:
  title: 评论
  empty:
@@ -1362,6 +1362,7 @@ core:
  toolbox:
  attachment: 选择附件
  show_hide_sidebar: 显示 / 隐藏侧边栏
+ title_placeholder: 请输入标题
  global_search:
  placeholder: 输入关键词以搜索
  no_results: 没有搜索结果

ui/src/locales/zh-TW.yaml

@@ -1328,6 +1328,7 @@ core:
  toolbox:
  attachment: 選擇附件
  show_hide_sidebar: 顯示 / 隱藏側邊欄
+ title_placeholder: 請輸入標題
  global_search:
  placeholder: 輸入關鍵字以搜尋
  no_results: 沒有搜尋結果