feat(component): new inline-edit component (#5517)

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/toeverything/AFFiNE/assets/39363750/6dad59f0-5e63-4c25-a81c-dff397da1d34">
  <img height="100" alt="" src="https://github.com/toeverything/AFFiNE/assets/39363750/7c30d7b2-55c9-49eb-82e7-a0882f2e0493">
</picture>

packages/frontend/component/src/ui/editable/inline-edit.css.ts

@@ -0,0 +1,51 @@
+import { style } from '@vanilla-extract/css';
+
+export const inlineEditWrapper = style({
+  position: 'relative',
+  borderRadius: 4,
+  padding: 4,
+  display: 'inline-block',
+  minWidth: 50,
+  minHeight: 28,
+});
+export const inlineEdit = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+
+  whiteSpace: 'pre',
+  wordWrap: 'break-word',
+
+  // to avoid shrinking when <input /> show up
+  border: '1px solid transparent',
+
+  selectors: {
+    [`.${inlineEditWrapper}[data-editing="true"] &`]: {
+      opacity: 0,
+      visibility: 'hidden',
+    },
+  },
+});
+
+export const inlineEditInput = style({
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  left: 0,
+  top: 0,
+
+  opacity: 0,
+  visibility: 'hidden',
+  pointerEvents: 'none',
+
+  selectors: {
+    [`.${inlineEditWrapper}[data-editing="true"] &`]: {
+      opacity: 1,
+      visibility: 'visible',
+      pointerEvents: 'auto',
+    },
+  },
+});
+
+export const placeholder = style({
+  opacity: 0.8,
+});