TypeScriptで自分で決めた値をexportしたいです

前提

TypeScriptでテキスト校正するエディタを作っています。別のファイルで指定した値をexport,importしたいですが、エラーが発生しました。

実現したいこと

・index.tsxで宣言したwrittenTextをexportして、tabキーが押されたときにEditable.tsxで空白を4つ空ける処理がしたい。

発生している問題・エラーメッセージ

①

ここで修飾子を使用することはできません。

②

名前writtenTextが見つかりません。

該当のソースコード

①

index.tsx
1import {
2  Box,
3  Button,
4  ButtonGroup,
5  Icon,
6  IconButton,
7  useColorMode,
8} from '@chakra-ui/react';
9import Head from 'next/head';
10import { useState, VFC, useEffect } from 'react';
11import {
12  HiMoon,
13  HiOutlineArrowNarrowDown,
14  HiOutlineArrowNarrowRight,
15  HiSun,
16} from 'react-icons/hi';
17import { Node } from 'slate'; //ここをたどってルール変更
18import { Slate } from 'slate-react';
19
20import { Editable } from '../components/Editable/Editable';
21import { Logo } from '../components/Logo';
22import { useDirection } from '../lib/direction';
23import { createEditor } from '../lib/editor/plugins';
24const IndexPage: VFC = () => {
25  const [editor] = useState(createEditor);
26  const { direction, toggleDirection } = useDirection();
27  const { colorMode, toggleColorMode } = useColorMode();
28
29  const [value, setValue] = useState<Node[]>([
30    {
31      type: 'paragraph',
32      children: [{ text: '' }],
33    },
34  ]);
35  export const writtenText = value[0].children[0].text;
36  console.log(writtenText);
37
38  //ここから
39  const general = () => {
40    //最初のtabだけ実装できていない\t
41    const ruleCheck = /\[[1-9]\]/.test(writtenText);
42    //const ru = s.match(/[ [ 1-9 \]A-Z]/)
43    return console.log(ruleCheck);
44  };
45
46  console.log(Box.name);
47  console.log(Slate.name);
48  general();
49
50  return (
51    <>
52      <Head>
53        <title>INIAD IE</title>
54      </Head>
55      <ButtonGroup p="2" position="fixed" top="0" left="0" id="a">
56        <Button variant="ghost" p="2">
57          <Box as="span" display="inline-block" h="10" w="10" id="b">
58            <Logo />
59          </Box>
60        </Button>
61      </ButtonGroup>
62      <Slate
63        id="cjdfa"
64        editor={editor}
65        value={value}
66        onChange={(newValue) => setValue(newValue)} //ここでテキスト更新
67      >
68        <Editable direction={direction}></Editable>
69        <ButtonGroup p="2" position="fixed" bottom="0" right="0">
70          <IconButton
71            colorScheme="gray"
72            variant="ghost"
73            p="2"
74            onClick={toggleDirection}
75            aria-label={
76              direction === 'horizontal'
77                ? '縦書きで表示する'
78                : '横書きで表示する'
79            }
80            icon={
81              <Box
82                id="d"
83                as="span"
84                display="inline-block"
85                position="relative"
86                h="6"
87                w="6"
88              >
89                <Box
90                  id="e"
91                  as="span"
92                  fontSize="xs"
93                  position="absolute"
94                  top="0"
95                  left="0"
96                  aria-hidden="true"
97                >
98                  あ
99                </Box>
100                {direction === 'horizontal' ? (
101                  <HiOutlineArrowNarrowRight
102                    id="g"
103                    style={{
104                      position: 'absolute',
105                      width: '1.5rem',
106                      height: '1.5rem',
107                      bottom: '-0.5rem',
108                      right: 0,
109                    }}
110                  />
111                ) : (
112                  <HiOutlineArrowNarrowDown
113                    id="f"
114                    style={{
115                      position: 'absolute',
116                      width: '1.5rem',
117                      height: '1.5rem',
118                      bottom: 0,
119                      right: '-0.5rem',
120                    }}
121                  />
122                )}
123              </Box>
124            }
125          />
126
127          <IconButton
128            colorScheme="gray"
129            variant="ghost"
130            p="2"
131            onClick={toggleColorMode}
132            aria-label={
133              colorMode === 'light'
134                ? 'ダークモードにする'
135                : 'ライトモードにする'
136            }
137            icon={<Icon as={colorMode === 'light' ? HiMoon : HiSun} />}
138          />
139        </ButtonGroup>
140      </Slate>
141    </>
142  );
143};
144
145export default IndexPage;

②こちらを一番下に書いた場合も試しました。

index.tsx
1
2export default IndexPage;
3export {writtenText}

こちらがimportしたいファイルです。

Editable.tsx
1import { Flex } from '@chakra-ui/react';
2import { useEffect, VFC } from 'react';
3import { Editable as SlateEditable } from 'slate-react';
4
5import { renderElement } from '../../lib/editor/plugins';
6import { writtenText } from '../../pages/index';
7
8export const Editable: VFC<{ direction: 'vertical' | 'horizontal' }> = ({
9  direction,
10}) => {
11  useEffect(() => {
12    window.addEventListener('keydown', function (this: any, event) {
13      if (event.keyCode == 9) {
14        event.preventDefault();
15        console.log('tab');
16
17        const TAB = '\t';
18        const value = this.value;
19        const sPos = this.selectionStart;
20        const ePos = this.selectionEnd;
21        const result = value.slice(0, sPos) + TAB + value.slice(ePos);
22        const cPos = sPos + TAB.length;
23        this.value = result;
24        this.setSelectionRange(cPos, cPos);
25      }
26      return removeEventListener('keydown', (event) => {
27        console.log();
28      });
29    });
30  }, []);
31
32  /*useEffect(() => {
33    addEventListener('keydown', (even) => {
34      onTextAreaKeyDown(event, this);
35    });
36    function onTextAreaKeyDown(event, object) {
37      // キーコードと入力された文字列
38      const keyCode = event.keyCode;
39      const keyVal = event.key;
40
41      // カーソル位置
42      const cursorPosition = object.selectionStart;
43      // カーソルの左右の文字列値
44      const leftString = object.value.substr(0, cursorPosition);
45      const rightString = object.value.substr(
46        cursorPosition,
47        object.value.length
48      );
49
50      // タブキーの場合
51      if (keyCode === 9) {
52        event.preventDefault(); // 元の挙動を止める
53        // textareaの値をカーソル左の文字列 + タブスペース + カーソル右の文字列にする
54        object.value = leftString + '\t' + rightString;
55        // カーソル位置をタブスペースの後ろにする
56        object.selectionEnd = cursorPosition + 1;
57      }
58    }
59  });*/
60
61  return (
62    <Flex
63      id="textArea"
64      h="max-content"
65      w="max-content"
66      minH="full"
67      minW="full"
68      alignItems="center"
69      flexDir={direction === 'vertical' ? 'row' : 'column'}
70    >
71      <SlateEditable
72        id="tab_input"
73        className="tab_input"
74        placeholder="自由にお書き下さい。"
75        style={{
76          lineHeight: 2,
77
78          height: '100%',
79          width: '100%',
80
81          maxHeight: direction === 'vertical' ? '40rem' : 'max-content',
82          maxWidth: direction === 'horizontal' ? '40rem' : 'max-content',
83
84          minHeight: direction === 'horizontal' ? '100%' : 0,
85          minWidth: direction === 'vertical' ? '100%' : 0,
86
87          paddingTop: direction === 'horizontal' ? '4rem' : '1rem',
88          paddingBottom: direction === 'horizontal' ? '50vh' : '1rem',
89          paddingRight: direction === 'vertical' ? '4rem' : '1rem',
90          paddingLeft: direction === 'vertical' ? '50vw' : '1rem',
91
92          writingMode:
93            direction === 'horizontal'
94              ? 'horizontal-tb'
95              : direction === 'vertical'
96              ? 'vertical-rl'
97              : undefined,
98        renderElement={renderElement}
99      />
100    </Flex>
101  );
102};
103