name: Prerelease
on:
  push:
    paths:
      - '.changeset/**'
      - 'packages/**'
      - '.storybook/**'
      - '.github/workflows/**'
      - 'package.json'
    branches:
      - v5-editor

...중략...

jobs:
  changesets:
    name: Run changesets
    runs-on: ubuntu-latest
    outputs:
      published: ${{ steps.changesets.outputs.published }}
      packages: ${{ steps.changesets.outputs.publishedPackages }}
    steps:
      ...중략...

      - name: Create release Pull request or Publish npm
        id: changesets
        uses: changesets/action@v1
        with:
          publish: yarn release
          commit: '[PRERELEASE] Release new version packages'
          title: '[PRERELEASE] Release new version packages'
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

...중략...

// 사용처
<Editor
  isToolbarSticky
  controls={[
    ['bold', 'italic', 'strikethrough', 'link'],
    ['code', 'codeBlock', 'blockquote', 'image'],
    ['h1', 'h2', 'h3', 'bulletList', 'orderedList', 'divider'],
  ]}
  ref={editorRef}
  placeholder={getPlaceholder(category)}
  uploadImage={mutateAsync}
  height='100%'
  maxHeight='none'
  onClickToolbarButton={(type) => {
    if (!type) {
      return;
    }

    editorControlLookup[type]();
  }}
/>

export type EditorProps = {
  editor?: TiptapReactEditor | null;
  initialValue?: string;
  extensions?: Extensions;
  controls?: Control[][];
  floatingControls?: Control[][];
  controlTooltipWithinPortal?: boolean;
  bubbleControls?: Control[][];
  maxImageSize?: number;
  disabled?: boolean;
  onChange?: SetContent;
  height?: string;
  minHeight?: string;
  maxHeight?: string;
  placeholder?: string;
  uploadImage?: UploadFormData;
  onClickToolbarButton?: OnClickToolbarButton;
  isToolbarSticky?: boolean;
  colorPalette?: ColorPaletteOptions;
  headingLevels?: TypoHeadingLevelOptions;
  activateFixedToolbar?: boolean;
  activateFocusToolbar?: boolean;
  customControls?: ControlOption[];
  soleCustomControls?: ControlOption[];
};

// Toolbar.tsx

// control의 종류에 맞는 ui 컴포넌트를 결정하는 로직
const getToolbarControl = ({
  ...
}) => {
  if (controlOption.uiType === 'dropdown') {
    return (
      <DropdownControl
        key={key}
        controlName={controlName}
        controlOption={controlOption}
        editorDisabled={editorDisabled}
        activateFixedToolbar={activateFixedToolbar}
      />
    );
  }

  if (controlOption.uiType === 'popover') {
    return (
      <PopoverControl
        key={key}
        controlName={controlName}
        controlOption={controlOption}
        editorDisabled={editorDisabled}
      />
    );
  }

  return (
    <ButtonControl
      key={key}
      controlName={controlName}
      controlOption={controlOption}
      editorDisabled={editorDisabled}
      disableTooltip={disableTooltip}
    />
  );
};

export default function Toolbar({...}) {
  // 툴바 안에서 또 다른 구역 안에 렌더링 될 컨트롤을 분리하는 로직
  const soleControlGroup = soleCustomControls.map((option, _index) => (
    <div tabIndex={0} className='toolbar-group' key={`solo-control-${_index}`}>
      {getToolbarControl({
        controlName: 'soleCustom',
        key: `soleCustom-${_index}`,
        controlOption: option,
        disableTooltip,
        editorDisabled,
        activateFixedToolbar,
      })}
    </div>
  ));

  // control 이름 배열을 토대로 custom 컨트롤과 일반 컨트롤 ui를 결정하는 로직. divider를 그려내는 로직이 포함되어 있다.
  const parsedControls = controls.filter((control) => control.length !== 0);

  const controlGroups = parsedControls.map((group, index) => {
    const controlGroup = group
      .filter(
        (controlName) =>
          controlName !== 'soleCustom' &&
          (controlName === 'custom' || utils[controlName])
      )
      .map((controlName, _index) => {
        if (controlName === 'custom') {
          return (
            <Fragment key={`${controlName}-${_index}`}>
              {customControls.map((customControl, customControlIndex) =>
                getToolbarControl({
                  controlName,
                  key: `${controlName}-${customControlIndex}`,
                  controlOption: customControl,
                  disableTooltip,
                  editorDisabled,
                  activateFixedToolbar,
                })
              )}
            </Fragment>
          );
        }

        if (controlName !== 'soleCustom') {
          // control 이름을 기준으로 해당 control을 구성하는데 필요한 설정값들을 매핑하여 UI 컴포넌트에 전달
          const controlOption = utils[controlName];

          return getToolbarControl({
            controlName,
            key: controlName,
            controlOption,
            disableTooltip,
            editorDisabled,
            activateFixedToolbar,
          });
        }
      });

    return (
      <Fragment key={index}>
        <div tabIndex={0} className='toolbar-group'>
          {controlGroup}
        </div>
        {parsedControls.length - 1 === index ? null : (
          <div className='toolbar-divider' />
        )}
      </Fragment>
    );
  });

  // 각종 유틸들
  const validControls = [controlGroups, soleControlGroup].filter(
    (groups) => groups.length !== 0
  );

  // 각종 스타일 관련 함수들
  const stickyClassName = isToolbarSticky ? 'sticky' : '';

  const toolbarContainerClassName = `editor-toolbar-container ${stickyClassName} ${
    classNameSuffix ? `editor-toolbar-container--${classNameSuffix}` : ''
  }`;

  const toolbarsClassName = `editor-toolbars ${
    classNameSuffix ? `editor-toolbars--${classNameSuffix}` : ''
  }`;

  // 최종적으로 렌더링되는 toolbar의 모습
  return (
    <div className={toolbarsClassName}>
      {validControls.map((groups, index) => (
        <div
          key={`validControls-${index}`}
          className={toolbarContainerClassName}
        >
          {groups}
        </div>
      ))}
    </div>
  );
}

export function ToolbarContainer({
  type = 'fixed',
  tooltipWithinPortal = false,
  opened = false,
  className,
  children,
}: Props) {
  if (type === 'focus') {
    return (
      <ToolbarProvider value={{ tooltipWithinPortal }}>
        <FocusMenuWrapper opened={opened}>
          <div className={toolbarClassName}>{children}</div>
        </FocusMenuWrapper>
      </ToolbarProvider>
    );
  }

  return (
    <ToolbarProvider value={{ tooltipWithinPortal }}>
      <div className={toolbarClassName}>{children}</div>
    </ToolbarProvider>
  );
}

// UI만 관여
export const ToolbarFragment = ({ showDivider = false, children }: Props) => (
  <div
    data-testid='toolbar-fragment'
    className={`editor-toolbar__fragment ${
      showDivider ? 'editor-toolbar__controls-group--divider' : ''
    }`}
  >
    {Children.map(children, (child, index) => (
      <Fragment key={index}>{child}</Fragment>
    ))}
  </div>
);

export const ToolbarControlsGroup = ({ children }: Props) => (
  <div
    className='editor-toolbar__controls-group'
    data-testid='toolbar-controls-group'
  >
    {children}
  </div>
);

<Editor.Toolbar tooltipWithinPortal>
  <Editor.ToolbarFragment showDivider>
    <Editor.ToolbarControlsGroup> control들... </Editor.ToolbarControlsGroup>
    <Editor.ToolbarControlsGroup> control들... </Editor.ToolbarControlsGroup>
    <Editor.ToolbarControlsGroup> control들... </Editor.ToolbarControlsGroup>
    <Editor.ToolbarControlsGroup> control들... </Editor.ToolbarControlsGroup>
  </Editor.ToolbarFragment>
</Editor.Toolbar>

// as-is
<Editor colorPaletteOptions={COLORS} />

// to-be
<Editor.TextColor colorPaletteOptions={COLORS} />

// Editor.tsx

export const Editor = (
...
  const toolbarUtils = getControl(
      editorInstance,
      maxImageSize,
      uploadImage,
      showNotification,
      controlTooltipWithinPortal,
      colorPalette,
      headingLevels,
      onClickToolbarButton
    );

    return (
      ...
          <Toolbar
            controls={controls}
            utils={toolbarUtils}
            editorDisabled={disabled}
            isToolbarSticky={isToolbarSticky}
            customControls={customControls}
            soleCustomControls={soleCustomControls}
            activateFixedToolbar={activateFixedToolbar}
          />
      ...
    )
)

// Toolbar.tsx
// control의 종류에 맞는 ui 컴포넌트를 결정하는 로직
const getToolbarControl = ({
  ...
}) => {
  if (controlOption.uiType === 'dropdown') {
    return (
      <DropdownControl
        key={key}
        controlName={controlName}
        controlOption={controlOption}
        editorDisabled={editorDisabled}
        activateFixedToolbar={activateFixedToolbar}
      />
    );
  }

  if (controlOption.uiType === 'popover') {
    return (
      <PopoverControl
        key={key}
        controlName={controlName}
        controlOption={controlOption}
        editorDisabled={editorDisabled}
      />
    );
  }

  return (
    <ButtonControl
      key={key}
      controlName={controlName}
      controlOption={controlOption}
      editorDisabled={editorDisabled}
      disableTooltip={disableTooltip}
    />
  );
};

// getControl.ts

export default function getControl(...): ControlUtil {
  const commonUtil = {
    onClickToolbarButton,
    editor,
    controlTooltipWithinPortal,
  };

  return {
    bold: boldControlOption(commonUtil),
    ...
  };
}

// boldControlOption.tsx
export function boldControlOption({
  onClickToolbarButton,
  editor,
  controlTooltipWithinPortal,
}: CommonProperty): ControlOption {
  return {
    uiType: 'button',
    icon: <Icon icon={faBold} />,
    control: 'bold',
    onClick: () => {
      onClickToolbarButton?.('bold');
      editor.chain().focus().toggleBold().run();
    },
    isActive: () => editor.isActive('bold'),
    controlTooltipWithinPortal,
    tooltip: {
      mac: '굵게',
    },
    isDisabled: () => editor.isActive('heading'),
  };
}

Controls
├── _base
├── button
│   ├── bold (control별 디렉토리)
│   │   ├── BoldControl.tsx
│   │   └── BoldControlOption.ts
│   ├── ButtonControl.tsx
│   ├── ButtonControlOptionInterface.ts
│   └── index.ts
├── dropdown
├── popover
└── types.ts

// BoldControl.tsx

// 외부에 공개하는 인터페이스. bold 컨트롤에 대한 데이터만 주입받음.
type BoldControlProps = ButtonControlCommonProps;

export const BoldControl = ({ onClickCallback }: BoldControlProps) => {
  const { editor } = useContext(EditorContext);

  if (!editor) {
    return null;
  }

  // bold control을 기능적으로 구성하는데 필요한 로직 처리를 담당한다. 이 컴포넌트에서는 해당 로직에는 관심 없으며, 그 결과만을 이용한다.
  const options = new BoldControlOption(editor, onClickCallback);

  return (
    <ButtonControl
      controlName={options.controlName}
      isActive={() => options.isActive()}
      isDisabled={() => options.isDisabled()}
      onClickControl={() => options.onClickControl()}
      // 비즈니스 로직과 관련없는 UI 관련은 option class에서 담당하지 않는다.
      tooltipLabel='굵게'
      icon={<Icon icon={faBold} />}
    />
  );
};

// BoldControlOption.ts

// UI 컴포넌트에서 분리할 수 있는, 컨트롤을 기능적으로 이용하는데 필수적인 리액트와 관련 없는 비즈니스 로직과 메타 정보를 담당
export class BoldControlOption implements ButtonControlOptionInterface {
  private readonly _controlName = 'bold';

  constructor(
    private readonly editor: Editor,

    private readonly onClickControlCallback?: OnClickControlCallback
  ) {}

  get controlName() {
    return this._controlName;
  }

  onClickControl() {
    this.onClickControlCallback?.(this._controlName);
    this.editor.chain().focus().toggleBold().run();
  }

  isActive() {
    return this.editor.isActive(this._controlName);
  }

  isDisabled() {
    return this.editor.isActive('heading');
  }

  // ButtonControlOptionInterface에서 정의된 내용을 충족했다면 그 외에 특정 컨트롤에만 필요한 비즈니스 로직을 추가로 작성해도 문제없음.
}

// as-is
<Editor controls={[['bold']]} />

// to-be
<Editor>
  <Editor.Toolbar tooltipWithinPortal>
        <Editor.ToolbarFragment showDivider>
          <Editor.ToolbarControlsGroup>
            <Editor.Bold />
          </Editor.ToolbarControlsGroup>
        </Editor.ToolbarFragment>
  </Editor.Toolbar>
</Editor>

// as-is
<Editor
  // custom control 렌더링을 Editor에서 담당하기 때문에, 사용한다고 알려줌
  controls={[['custom']]}
  // custom control 모습 및 로직을 사용처에서 작성해서 넘겨줌
  customControls={[
    {
      onClick: (targetValue) => {
        if (typeof targetValue === 'string') {
          onChangeColor?.(targetValue);

          if (targetValue === 'deep-blue') {
            editor?.commands.setColor(WHITE_COLOR);
          }

          if (editor) {
            editor.commands.focus();
          }

          onClickEditorToolbarButtons?.({
            controlType: 'bg' + startCase(targetValue),
            elementType: 'InfoBox',
            blockType,
          });
        }
      },
      uiType: 'dropdown',
      icon: <InfoBoxColorDropdownItem color={color} />,
      control: 'custom',
      currentValue: color,
      dropdownWidth: 48,
      dropdownItem: InfoBoxTextColorDropdownItem,
      dropdownOptions: InfoBoxColorDropdownColorSet,
    },
  ]}
/>

<Editor>
  <Editor.Toolbar type='focus' tooltipWithinPortal={false}>
    <Editor.ToolbarFragment>
      <Editor.ToolbarControlsGroup>
        ... // 직접 개발한 커스텀 컨트롤
        <BackgroundColorControl
          currentColor={color}
          onChangeBackgroundColor={onChangeColor}
          onClickCallback={handleClickBackgroundColorControl}
        />
      </Editor.ToolbarControlsGroup>
    </Editor.ToolbarFragment>
    <Editor.ToolbarFragment>
      <Editor.ToolbarControlsGroup>
        // 직접 개발한 커스텀 컨트롤
        <RemoveElementControl onClickCallback={onClickRemoveButton} />
      </Editor.ToolbarControlsGroup>
    </Editor.ToolbarFragment>
  </Editor.Toolbar>
  <Editor.Content />
</Editor>;

// RemoveElementControl.tsx
import type { ButtonControlCommonProps } from '@inflearn/editor';
import { ButtonControl, EditorContext } from '@inflearn/editor';

import { RemoveElementControlOption } from './RemoveElementControlOption';

type RemoveElementControlProps = ButtonControlCommonProps;

export const RemoveElementControl = ({
  onClickCallback,
}: RemoveElementControlProps) => {
  const { editor } = useContext(EditorContext);

  if (!editor) {
    return null;
  }

  const options = new RemoveElementControlOption(editor, onClickCallback);

  return (
    <ButtonControl
      tooltip={options.tooltip}
      controlName={options.controlName}
      isActive={() => options.isActive()}
      isDisabled={() => options.isDisabled()}
      onClickControl={() => options.onClickControl()}
      icon={<Icon icon={faArrowsRotate} />}
      tooltipLabel='요소 삭제'
    />
  );
};

// RemoveElementControlOption.ts
import type {
  OnClickControlCallback,
  TiptapReactEditorType,
  ButtonControlOptionInterface,
} from '@inflearn/editor';

export class RemoveElementControlOption
  implements ButtonControlOptionInterface
{
  private readonly _controlName = 'removeElement';

  constructor(
    private readonly editor: TiptapReactEditorType,
    private readonly onClickControlCallback?: OnClickControlCallback
  ) {}

  get controlName() {
    return this._controlName;
  }

  onClickControl() {
    this.onClickControlCallback?.(this._controlName);
  }

  isActive() {
    return this.editor.isActive(this._controlName);
  }

  isDisabled() {
    return false;
  }
}