Annotate with fixed tags

[wynn5a]

Awesome library!

Wondering if there is a prop or workaround for annotating image with fixed declared tags?

Thanks for your help!

[Secretmapper]

@wynn5a Do you mean an element that is already existing in the dom? i.e. an <img />?

If so this is not possible right now. There are too many possibilities with existing elements that it would be tricky to implement. There might be a way to do it by ensuring the child/element has a certain interface but I'll have to look into it.

I'm curious, would you be able to share the use case for this?

[wynn5a]

I mean using select instead of input when creating annotation, and I did this by renderEditor method already. Thanks all the same.

[ChunxuYang]

I mean using select instead of input when creating annotation, and I did this by renderEditor method already. Thanks all the same.

May I ask how you did it? Thanks!

[wynn5a]

@ChunxuYang

Finally I find the code, hope this may help 😃

Rewrite TextEditor to something like this

function TextEditor(props) {
  const tags = props.tags;
  return (
    <React.Fragment>
      <Inner>{
        tags && tags.length > 0 ?
          <Select
            defaultValue={props.annotation.data ? props.annotation.data.text : 'please select'}
            style={{ width: '200px' }}
            placeholder="select..."
            onChange={e => props.onChange({
              ...props.annotation,
              data: {
                ...props.annotation.data,
                text: e,
              },
            })}
          >
            {
              [
                tags.map(e => <Option key={e} value={e}>{e}</Option>),
              ]
            }
          </Select>
          :
          <textarea
            placeholder='Write description'
            onFocus={props.onFocus}
            onBlur={props.onBlur}
            onChange={e => props.onChange({
              ...props.annotation,
              data: {
                ...props.annotation.data,
                text: e.target.value,
              },
            })}
            value={props.value}
          />

      }
        {props.value && (
          <span style={{ marginLeft: '10px' }}>
            <Button
              type="primary"
              onClick={props.onSubmit}
            >
           Submit
            </Button>
            <Button
              type="default"
              onClick={props.onCancel}
            >
           Cancel
            </Button>
          </span>
        )}
      </Inner>
    </React.Fragment>
  );
}

[ChunxuYang]

That's very helpful. Thanks a lot.

2020-11-09 14:52:22"Wenming Fu" notifications@github.com写道：

@ChunxuYang

Finally I find the code, hope this may help 😃

Rewrite TextEditor to something like this

function TextEditor(props) {

const tags = props.tags;

return (

<React.Fragment>

  <Inner>{

    tags && tags.length > 0 ?

      <Select

        defaultValue={props.annotation.data ? props.annotation.data.text : 'please select'}

        style={{ width: '200px' }}

        placeholder="select..."

        onChange={e => props.onChange({

          ...props.annotation,

          data: {

            ...props.annotation.data,

            text: e,

          },

        })}

      >

        {

          [

            tags.map(e => <Option key={e} value={e}>{e}</Option>),

          ]

        }

      </Select>

      :

      <textarea

        placeholder='Write description'

        onFocus={props.onFocus}

        onBlur={props.onBlur}

        onChange={e => props.onChange({

          ...props.annotation,

          data: {

            ...props.annotation.data,

            text: e.target.value,

          },

        })}

        value={props.value}

      />

  }

    {props.value && (

      <span style={{ marginLeft: '10px' }}>

        <Button

          type="primary"

          onClick={props.onSubmit}

        >

       Submit

        </Button>

        <Button

          type="default"

          onClick={props.onCancel}

        >

       Cancel

        </Button>

      </span>

    )}

  </Inner>

</React.Fragment>

);

}

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.