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.stories.tsx

@@ -0,0 +1,140 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { useCallback, useRef, useState } from 'react';
+
+import { Button } from '../button';
+import { ResizePanel } from '../resize-panel/resize-panel';
+import { InlineEdit, type InlineEditHandle } from './inline-edit';
+
+export default {
+  title: 'UI/Editable/Inline Edit',
+  component: InlineEdit,
+} satisfies Meta<typeof InlineEdit>;
+
+const Template: StoryFn<typeof InlineEdit> = args => {
+  const [value, setValue] = useState(args.value || '');
+  return (
+    <div style={{ marginBottom: 40 }}>
+      <div style={{ marginBottom: 20 }}>
+        <div style={{ marginBottom: 10 }}>
+          <span>
+            <b>Value: </b>
+          </span>
+          <span
+            style={{
+              padding: '2px 4px',
+              backgroundColor: 'rgba(100, 100, 100, 0.1)',
+            }}
+          >
+            {value}
+          </span>
+        </div>
+      </div>
+
+      <ResizePanel
+        width={600}
+        height={36}
+        minHeight={36}
+        minWidth={200}
+        maxWidth={1400}
+        horizontal={true}
+        vertical={false}
+        style={{ display: 'flex', alignItems: 'center' }}
+      >
+        <InlineEdit
+          style={{ maxWidth: '100%' }}
+          value={value}
+          onChange={v => setValue(v)}
+          {...args}
+        />
+      </ResizePanel>
+    </div>
+  );
+};
+
+export const Basic: StoryFn<typeof InlineEdit> = Template.bind(undefined);
+Basic.args = {
+  editable: true,
+  placeholder: 'Untitled',
+  trigger: 'doubleClick',
+  autoSelect: true,
+};
+
+export const CustomizeText: StoryFn<typeof InlineEdit> =
+  Template.bind(undefined);
+CustomizeText.args = {
+  value: 'Customize Text',
+  editable: true,
+  placeholder: 'Untitled',
+  style: {
+    fontSize: 20,
+    fontWeight: 500,
+    padding: '10px 20px',
+  },
+};
+
+export const TriggerEdit: StoryFn<typeof InlineEdit> = args => {
+  const ref = useRef<InlineEditHandle>(null);
+
+  const triggerEdit = useCallback(() => {
+    if (!ref.current) return;
+    ref.current.triggerEdit();
+  }, []);
+
+  return (
+    <>
+      <div style={{ marginBottom: 12 }}>
+        <Button onClick={triggerEdit}>Edit</Button>
+      </div>
+      <ResizePanel
+        width={600}
+        height={36}
+        minHeight={36}
+        minWidth={200}
+        maxWidth={1400}
+        horizontal={true}
+        vertical={false}
+        style={{ display: 'flex', alignItems: 'center' }}
+      >
+        <InlineEdit {...args} handleRef={ref} />
+      </ResizePanel>
+    </>
+  );
+};
+TriggerEdit.args = {
+  value: 'Trigger edit mode in parent component by `handleRef`',
+  editable: true,
+  autoSelect: true,
+};
+
+export const UpdateValue: StoryFn<typeof InlineEdit> = args => {
+  const [value, setValue] = useState(args.value || '');
+
+  const appendA = useCallback(() => {
+    setValue(v => v + 'a');
+  }, []);
+
+  return (
+    <>
+      <div style={{ marginBottom: 12 }}>
+        <Button onClick={appendA}>Append &quot;a&quot;</Button>
+      </div>
+      <ResizePanel
+        width={600}
+        height={36}
+        minHeight={36}
+        minWidth={200}
+        maxWidth={1400}
+        horizontal={true}
+        vertical={false}
+        style={{ display: 'flex', alignItems: 'center' }}
+      >
+        <InlineEdit {...args} value={value} onChange={setValue} />
+      </ResizePanel>
+    </>
+  );
+};
+UpdateValue.args = {
+  value: 'Update value in parent component by `value`',
+  editable: true,
+  autoSelect: true,
+};