fix(submit): repair placeholder, code block, hidden block and settings toggles

- placeholder: hide the body ::before hint once the editor body has focus, so
  clicking an empty document no longer leaves the hint sitting under the caret
- code block: edit as a bare <pre> and convert to pre > code on save. TinyMCE
  treats pre > code as an inline boundary, so typing there leaked into the
  following paragraph; Enlighter also splits lines on newlines, so the <br>
  the editor produced rendered the whole block as one overflowing line
- code block: align the iframe rendering with Enlighter (Menlo 13px/1.4,
  #f8f9fa, 8px radius, 12px 17px padding, nowrap) in both content CSS files
- code block: move the caret into the block after insertion
- hidden block: hang the block-delete overlay on documentElement instead of
  body. data-mce-bogus only skips serialization, so the extra body child made
  mceInsertContent wipe the document and drop the first hidden block
- settings: give the toggle a real 44x24 hit area, align it to the top of the
  row, add aria-labels and show the disabled state
- styles: drop the duplicated @use/@import of publish-drawer and block-tools
- media insert/embed now serialize through serializeBlocks so code blocks are
  never stored in editor form

assets/css/frontend/pages/submit-editor.css

@@ -115,19 +115,22 @@
   --quote-color: #23790e;
 }
 
-/* 代码块：与前台文章页一致，只用 pre > code，由 EnlighterJS 在发布页高亮。 */
+/* 代码块：与前台文章页一致（EnlighterJS 的 .enlighter-default 外观）。
+ * 编辑器里是裸 pre，保存前才套回 pre > code，因此换行行为必须与前台一致：
+ * 超长行横向滚动，不折行。 */
 pre {
-  margin: 0 0 1.1em;
-  padding: 14px 18px;
+  margin: 0 0 20px;
+  padding: 12px 17px;
   overflow-x: auto;
+  overflow-y: hidden;
   border-radius: 8px;
-  background: #f2f4f5;
-  color: #2b2b2b;
-  font-family: Consolas, Monaco, "Courier New", monospace;
+  background: #f8f9fa;
+  color: #555;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
   font-size: 13px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-wrap: break-word;
+  line-height: 1.4;
+  white-space: pre;
+  tab-size: 4;
 }
 
 pre code {
@@ -212,7 +215,8 @@ pre code {
  * 刻意不插 DOM 节点：插入的段落会被 setContent 清掉（首次加载不显示），
  * 也会占住首行、挡住点击空白处落光标。
  *
- * 绝对定位覆盖在空段落上，与原生 placeholder 的观感一致。
+ * 绝对定位覆盖在空段落上，与原生 placeholder 的观感一致；点击正文（body
+ * 获得焦点）后立即隐藏，否则提示会压在光标上，让人以为点击没生效。
  */
 body[data-jio-empty="1"]::before {
   position: absolute;
@@ -224,6 +228,10 @@ body[data-jio-empty="1"]::before {
   user-select: none;
 }
 
+body[data-jio-empty="1"]:focus::before {
+  display: none;
+}
+
 /*
  * body 撑满编辑区：内容很短时点击正文下方的空白区域也应落光标，
  * 否则只有文字所在的那一行能点。