feat: add a title input box in the editor

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

@@ -477,6 +477,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="formState.page.spec.title"
  :upload-image="handleUploadImage"
  class="h-full"
  @update="handleSetContentCache"

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

@@ -503,6 +503,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="formState.post.spec.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/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

@@ -103,6 +103,7 @@ const { currentUserHasPermission } = usePermission();
 
 const props = withDefaults(
  defineProps<{
+ title?: string;
  raw?: string;
  content: string;
  uploadImage?: (
@@ -111,13 +112,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;
@@ -399,7 +402,6 @@ onMounted(() => {
  UiExtensionUpload,
  ExtensionSearchAndReplace,
  ],
- autofocus: "start",
  parseOptions: {
  preserveWhitespace: true,
  },
@@ -436,6 +438,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>
@@ -447,6 +453,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

@@ -40,7 +40,7 @@ core:
  buttons:
  sending: sending
  send: Send Code
- countdown: "resend after {timer} seconds"
+ countdown: resend after {timer} seconds
  toast_success: verification code sent
  toast_email_empty: please enter your email address
  password:
@@ -1412,6 +1412,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:
@@ -1360,6 +1360,7 @@ core:
  toolbox:
  attachment: 选择附件
  show_hide_sidebar: 显示 / 隐藏侧边栏
+ title_placeholder: 请输入标题
  global_search:
  placeholder: 输入关键词以搜索
  no_results: 没有搜索结果

ui/src/locales/zh-TW.yaml

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

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

@@ -166,21 +166,7 @@ useAutoSaveContent(currentCache, toRef(content.value, "raw"), async () => {
  if (isUpdateMode.value) {
  handleSave({ mute: true });
  } else {
- formState.value.metadata.annotations = {
- ...formState.value.metadata.annotations,
- [contentAnnotations.CONTENT_JSON]: JSON.stringify(content.value),
- };
- // Set default title and slug
- if (!formState.value.spec.title) {
- formState.value.spec.title = t("core.post_editor.untitled");
- }
- if (!formState.value.spec.slug) {
- formState.value.spec.slug = new Date().getTime().toString();
- }
- const { data: createdPost } = await apiClient.uc.post.createMyPost({
- post: formState.value,
- });
- onCreatePostSuccess(createdPost);
+ handleCreate();
  }
 });
 
@@ -271,16 +257,34 @@ async function handleSetEditorProviderFromRemote() {
 }
 
 // Create post
-const postCreationModal = ref(false);
-
 function handleSaveClick() {
  if (isUpdateMode.value) {
  handleSave({ mute: false });
  } else {
- postCreationModal.value = true;
+ handleCreate();
  }
 }
 
+async function handleCreate() {
+ formState.value.metadata.annotations = {
+ ...formState.value.metadata.annotations,
+ [contentAnnotations.CONTENT_JSON]: JSON.stringify(content.value),
+ };
+ // Set default title and slug
+ if (!formState.value.spec.title) {
+ formState.value.spec.title = t("core.post_editor.untitled");
+ }
+ if (!formState.value.spec.slug) {
+ formState.value.spec.slug = new Date().getTime().toString();
+ }
+
+ const { data: createdPost } = await apiClient.uc.post.createMyPost({
+ post: formState.value,
+ });
+
+ await onCreatePostSuccess(createdPost);
+}
+
 async function onCreatePostSuccess(data: Post) {
  formState.value = data;
  // Update route query params
@@ -396,24 +400,7 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
  return;
  }
  if (!isUpdateMode.value) {
- formState.value.metadata.annotations = {
- ...formState.value.metadata.annotations,
- [contentAnnotations.CONTENT_JSON]: JSON.stringify(content.value),
- };
-
- if (!formState.value.spec.title) {
- formState.value.spec.title = t("core.post_editor.untitled");
- }
-
- if (!formState.value.spec.slug) {
- formState.value.spec.slug = new Date().getTime().toString();
- }
-
- const { data } = await apiClient.uc.post.createMyPost({
- post: formState.value,
- });
-
- await onCreatePostSuccess(data);
+ await handleCreate();
  }
 
  const { data } = await apiClient.uc.attachment.createAttachmentForPost(
@@ -487,20 +474,13 @@ useSessionKeepAlive();
  v-if="currentEditorProvider"
  v-model:raw="content.raw"
  v-model:content="content.content"
+ v-model:title="formState.spec.title"
  :upload-image="handleUploadImage"
  class="h-full"
  @update="handleSetContentCache"
  />
  </div>
 
- <PostCreationModal
- v-if="postCreationModal"
- :title="$t('core.uc_post.creation_modal.title')"
- :content="content"
- @close="postCreationModal = false"
- @success="onCreatePostSuccess"
- />
-
  <PostCreationModal
  v-if="postPublishModal"
  :title="$t('core.uc_post.publish_modal.title')"