WEBページにおけるMarkdown エディタの不具合

Markdownエディタが思い通りに動きません

WEBページにMarkdownエディタを実装するためにsimplemde-markdown-editorを導入しました

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

toobarのボタンを押すとそれに対応したものがtextareaに出力されます
例:Hボタンなら#,Bボタンなら****など

そしてプレビューボタンを押すとそれがmarkdown方式に従って変換されます

今回のエラー内容としては
ボタンを押すとtextareaに出力されるのですがプレビューボタンを押しても変換されないことです
Laravel中では上手く動作しないのですが静的なHTML上では動作します

###試したこと

両者の違いとしてはボタンを押した後の入力位置です

上手く動作する静的なHTMLではHボタンを押した後には#と出力され、その後の入力位置は#の後になります（#に続く形）
しかし上手く動作しないLaravelではHボタンを押した後には#と出力され、その後の入力位置は#の前となります
B(太字)ボタンの場合は****と両者とも出力されますが同様に
静的なHTMLの場合
**
と
**
の間が入力位置となりますがLaravelの場合は一番左端からになります

またLaravelの場合はtextareaの全選択が出来ずに文頭に入力位置が移るという挙動をします

分かりにくい説明になりましたがご回答のほどよろしくお願いいたします。
###コード

app.blade.php
1<!DOCTYPE html>
2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3<head>
4
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    @yield('meta')
8
9    <!-- CSRF Token -->
10    <meta name="csrf-token" content="{{ csrf_token() }}">
11
12    <title>@yield('title')</title>
13
14    <!-- Scripts -->
15    <script src="{{ asset('js/app.js') }}"></script>
16    <script src="{{ asset('js/jquery.tagsinput.min.js') }}"></script>
17    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
18
19
20    <link rel="shortcut icon" href="/favicon.ico">
21    <!-- Fonts -->
22    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
23
24    <!-- Styles -->
25    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
26    <link href="{{ asset('css/jquery.tagsinput.min.css')}}" rel="stylesheet">
27    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
28
29    <style>
30    body {
31        font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'
32    }
33    </style>
34</head>
35<body>
36    <div id="app">
37        <header>
38            @include('layouts.nav')
39        </header>
40        <main>
41            @yield('content')
42        </main>
43        <footer>
44            @include('layouts.footer')
45        </footer>
46    </div>
47    @yield('script')
48</body>
49</html>
50

create.blade.php
1@extends('layouts.app')
2
3@section('title')
4記事投稿 
5@endsection
6
7@section('content')
8<div class="container">
9    <div class="row justify-content-center">
10        <div class="col-md-8">
11            <div class="card">
12                <div class="card-header">
13                    記事を投稿する
14                </div>
15                <div class="card-body">
16                    <form method="POST" action="{{ route('articles.store')}}">
17                        @csrf
18                        <div class="form-group row">
19                            <label for="title" class="col-12 col-form-label">{{ __('Title') }}</label>
20
21                            <div class="col-12">
22                                <input id="title" type="text" name="title" value="{{ old('title') }}"
23                                    class="form-control{{ $errors->has('title') ? ' is-invalid' : '' }}"
24                                    required autofocus>
25
26                                @if($errors->has('title'))
27                                    <span class="invalid-feedback" role="alert">
28                                        <strong>{{ $errors->first('title')}}</strong>
29                                    </span>
30                                @endif
31                            </div>
32                        </div>
33
34                        <div class="form-group row">
35                            <label for="tags" class="col-12 col-form-label">{{ __('Tags') }}</label>
36
37                            <div class="col-12">
38                                <input id="tags" type="text" name="tags" value="{{ old('tags') }}"
39                                    class="form-control{{ $errors->has('tags') ? ' is-invalid' : '' }}"
40                                    required>
41
42                                @if($errors->has('tags'))
43                                    <span class="invalid-feedback" role="alert">
44                                        <strong>{{ $errors->first('tags') }}</strong>
45                                    </span>
46                                @endif
47                            </div>
48                        </div>
49
50                        <div class="form-group row">
51                            <div class="col-12 d-inline-flex justify-content-between">
52                                <label for="body" class="col-form-label">本文</label>
53                                <button type="button" name="button" class="btn btn-primary">テンプレート</button>
54                            </div>
55                        </div>
56
57                        <div class="form-group row">
58                            <div class="col-12">
59                                <textarea id="editor" name="body" rows="8" cols="80"></textarea>
60                            </div>
61                        </div>
62
63                        <div class="form-group row">
64                            <div class="col-12">
65                                <button type="submit" class="btn btn-primary btn-lg btn-block">
66                                    投稿
67                                </button>
68                            </div>
69                        </div>
70                    </form>
71                </div>
72            </div>
73        </div>
74    </div>
75</div>
76@endsection
77@section('script')
78<script>
79var simplemde = new SimpleMDE({
80  element: document.getElementById("editor"),
81});
82</script>
83@endsection
84

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8    <!-- CSRF Token -->
9
10    <title>Sample</title>
11
12    <!-- Scripts -->
13    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
14
15    </script>
16
17    <link rel="shortcut icon" href="/favicon.ico">
18    <!-- Fonts -->
19    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
20
21    <!-- Styles -->
22    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
23
24    <style>
25    body {
26        font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'
27    }
28    </style>
29</head>
30<body>
31    <div id="app">
32        <header>
33        </header>
34        <main>
35          <textarea id="editor" name="name" rows="8" cols="80"></textarea>
36        </main>
37        <footer>
38        </footer>
39    </div>
40</body>
41<script>
42var simplemde = new SimpleMDE({
43  element: document.getElementById("editor"),
44});
45</script>
46</html>
47